亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

關于opacity從0到1的CSS3動畫在手機瀏覽器的顯示問題

關于opacity從0到1的CSS3動畫在手機瀏覽器的顯示問題

牧羊人nacy 2018-09-03 09:10:01
案例地址在線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,所以不是很清楚,望大神指點一二
查看完整描述

1 回答

?
長風秋雁

TA貢獻1757條經驗 獲得超7個贊

在加載css時就執行了fadeIn動畫,js去做delay修改時 已經晚了 可以這樣改
css修改
.index .m-songlist .song{
opacity:0;
height: 1.80rem;
animation-duration: .6s;
-webkit-animation-duration: .6s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
js修改
function addAnimationDelay(list) {

        var baseDelay = 0.1;
        list.each(function(index, ele) {
            $(ele).css({                "animation-name": "fadeIn",                
            "animation-delay": baseDelay + "s"
            });
            baseDelay += 0.1;
        });
    }


查看完整回答
反對 回復 2018-10-12
  • 1 回答
  • 0 關注
  • 1543 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號