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

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

WBOY

Release： 2016-06-24 11:37:21

Original

1633 people have browsed it

我用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>

Copy after login

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