时间戳

首页 > 解决方案 > CSS 过渡不适用于移动设备

javascript - CSS 过渡不适用于移动设备

问题描述

请看下面的动画。虽然您可能会看到它可以在 PC 上运行，但肯定有问题，因为它不能在移动设备上运行。例如在 Android 上，图像从一开始就被缩放并且不透明度为 1。我假设已经进行了过渡，但持续时间为 0s。谢谢您的帮助。

$(document).ready(function(){
    $(".photo").css(" -moz-transform", "scale(1.2)");
    $(".photo").css("-webkit-transform", "scale(1.2)");
    $(".photo").css("-o-transform", "scale(1.2)");
    $(".photo").css("opacity", "1");
    $(".photo").css("transform", "scale(1.2)");
});
.photo {
    display: inline-block;
    vertical-align:top;
    max-width:100%;
    opacity: 0.1;
    -moz-transition: transform 40s, opacity 6s;
    -webkit-transition: transform 40s, opacity 6s;
    transition: transform 40s, opacity 6s;
}
.photoDiv {
    display: inline-block;
    background-color: #f1f1f1;
    width: 100%;
    position: relative;
    overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="photoDiv">
        <img class="photo" src="https://img-aws.ehowcdn.com/877x500p/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/f24b4a7bf9f24d1ba5f899339e6949f3">
</div>

标签： javascriptandroidjqueryhtmlcss

解决方案

我认为从 JS 中删除 CSS 会更干净。jQuery 也是多余的，对于您在这里尝试做的事情来说太大了。还要确保在正文的末尾添加 JS。这样你就可以确保在加载 JS 之前加载内容。

window.addEventListener('load', function() {
  var photos = document.getElementsByClassName('photo');

  if( photos )
  {
    for( var i = 0; i < photos.length; i++ )
    {
      var photo = photos[i];
      photo.classList.add('active');
    }
  }
});
.photo {
    display: inline-block;
    vertical-align:top;
    max-width:100%;
    opacity: 0.1;
    /*ease-in-out is the animation, 2s is the delay/ pause*/
    transition: transform 40s ease-in-out 2s, opacity 6s ease-in-out 2s;
    transform: scale(1);
}

.active {
  opacity: 1;
  transform: scale(1.2);
}

.photoDiv {
    display: inline-block;
    background-color: #f1f1f1;
    width: 100%;
    position: relative;
    overflow: hidden;
}
<div class="photoDiv">
  <img class="photo" src="https://img-aws.ehowcdn.com/877x500p/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/f24b4a7bf9f24d1ba5f899339e6949f3">
</div>

推荐阅读