案例地址在線demo: http://huzerui.online問題一:css3animation動畫的顯示效果問題。在chrome瀏覽器下(似乎和真機環境不等價),一切顯示正常。接著我在iphone下的qq瀏覽器(webkit)試了一下也正常,但在紅米Note3的qq瀏覽器下顯示不正常(就是開始我為音樂列表增加了從0到1的css3動畫),而壓根就沒有顯示正常:安卓下qq瀏覽器:css:@keyframes fadeIn{ from{ opacity:0
}to{ opacity:1
}
}.index .m-songlist .song{ opacity:0; height: 1.80rem; animation-name: fadeIn;
-webkit-animation-name: fadeIn; animation-duration: .6s; -webkit-animation-duration: .6s;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}js:function addAnimationDelay(list) { var baseDelay = 0.1;
list.each(function(index, ele) {
$(ele).css({ "animation-delay": baseDelay + "s"
});
baseDelay += 0.1;
});
}問題二: 這個總是在滑動到底部會顯示一會,即使在它之上有層級比它高的同樣fixed的元素。另外還有一個問題是position為fixed固定在底部的元素,即使我上面覆蓋了另一個fixed的頁面,當我滑動屏幕到底部時,底部那個fixed的元素總要出現以下然后再消失(可以手機運行下上面demo地址),請問這是什么詭異bug?剛開始接觸移動web,所以不是很清楚,望大神指點一二
關于opacity從0到1的CSS3動畫在手機瀏覽器的顯示問題
牧羊人nacy
2018-09-03 09:10:01