CSS过渡不适用于移动设备

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>