Question

请看下面的动画。虽然您可能会看到它可以在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>

Answer 1

我认为从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>

CSS过渡不适用于移动设备

1 个答案: