我使用 CSS 過渡來創建淡入淡出影片效果。這是代碼：
.animation-up{
opacity: 0;
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
-webkit-transition: -webkit-transform .6s ease;
transition: -webkit-transform .6s ease;
-o-transition: transform .6s ease;
transition: transform .6s ease;
transition: transform .6s ease,-webkit-transform .6s ease;
}
.animation-up.active {
opacity: 1;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
}
為了將活動添加到我使用的塊中：
function animations() {
appear({
elements: function elements(){
return document.getElementsByClassName('appear');
},
appear: function appear(el){
var item = $(el);
item.addClass('active');
},
bounds: 0,
reappear: true
});
}
這個影片在 Firefox、Opera，當然還有 Chrome 上運行良好。但在 iPhone 上存在一些問題。這是示例：https ://gyazo.com/1bd0bdb42fd7d043b404cd868b35e90b ，因為您可以看到該塊 Fade Up 但在消失并重新出現之后。也許JavaScript會導致問題？
uj5u.com熱心網友回復：
有多個過渡 css 屬性，最后一個將覆寫之前的那些。您可以像這樣用逗號分隔轉換目標：
transition: width 2s, height 4s;
所以在你的例子中
-webkit-transition: opacity 1s ease, transform .6s ease;
-o-transition: opacity 1s ease, transform .6s ease;
transition: opacity 1s ease, transform .6s ease;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/463753.html
標籤：javascript css