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>