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

woshidaniubi123 2015-09-06 05:44:03

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

            </div>

        </div>

    </div>

    <div class="section">

        <h3>第三屏</h3>

    </div>

    <div class="section">

        <h3>第四屏</h3>

    </div>

</div>

</body>

</html>