Heim >Web-Frontend >HTML-Tutorial >CSS3的transition动画效果在动态添加节点的时候无法实现的问题_html/css_WEB-ITnose

CSS3的transition动画效果在动态添加节点的时候无法实现的问题_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:37:211661Durchsuche

我用css3的transition实现动画效果,在单页面下是完全没有问题的,问题在于我做一个手机翻页的效果,当将要翻到这一页的时候我把这个页面的内容清空,只留下背景图,同时把透明度调低,然后当这个页面呈现出来,再动态添加节点,这个时候transition的效果没有出现,直接出来的是变换以后的效果,贴上测试代码

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="utf-8">    <link rel="stylesheet" href="css/jquery.fullPage.css">    <style>        .section {            text-align: center;            font: 50px "Microsoft Yahei";            background-color:#D4D4D4;        }        #wrapper {            background: url("images/bg_page_1.jpg");            height: 969px;            width: 640px;            margin: 0 auto;            text-align: center;            overflow: hidden;        }        #img4 {            transform: scale(0, 0);            transition: 1s;        }    </style>    <script src="js/jquery-1.8.3.min.js"></script>    <script src="js/jquery.fullPage.min.js"></script>    <script>        $().ready(function(){            $('#dowebok').fullpage({                sectionsColor: ['#4BBFC3', '#D4D4D4', '#7BAABE', '#f90'],css3:true,                afterLoad: function(anchorLink, index){                    if(index == 2){                        var $c4 = $('<div id="container4"><img  id="img4" src="images/44.png"/ alt="CSS3的transition动画效果在动态添加节点的时候无法实现的问题_html/css_WEB-ITnose" ></div>');                        $c4.appendTo($("#wrapper"));                        $("#img4").css("transform","scale(1,1)");                        $("#wrapper").css("opacity","1");                    }                },                onLeave: function(index,nextIndex,direction){                    if(index == '1' || index == "3" && nextIndex == '2'){//刚一离开页面 就把上个页面的内容清除 只留背景图 然后页面全部出现再加载内容                        $("#container4").remove();                        $("#wrapper").css("opacity","0.4");                    }                }            });            $("#img4").css("transform","scale(1,1)");            $("#img2").css("top","0px");            $("#img3").css("top","0px");        })    </script></head><body><div id="dowebok">    <div class="section">        <div class="slide"><h3>第一屏的第一屏</h3></div>        <div class="slide"><h3>第一屏的第二屏</h3></div>        <div class="slide"><h3>第一屏的第三屏</h3></div>    </div>    <div class="section active">        <div id="wrapper">            <div id="container4">                <img  id="img4" src="images/44.png"/ alt="CSS3的transition动画效果在动态添加节点的时候无法实现的问题_html/css_WEB-ITnose" >            </div>        </div>    </div>    <div class="section">        <h3>第三屏</h3>    </div>    <div class="section">        <h3>第四屏</h3>    </div></div></body></html>

animation是可以实现的 transition出不来效果


回复讨论(解决方案)

用animation替代transition也不行啊 我需要transition的一个效果 然后再调用animation让他持续播放动画

解决结贴
写两个animation 然后用setTimeOut定时切换
完毕

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn