ノードを動的に追加するとCSS3の遷移アニメーション効果が実現できない問題_html/css

ノードを動的に追加するとCSS3の遷移アニメーション効果が実現できない問題_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:37:21

オリジナル

1632 人が閲覧しました

アニメーション効果を実現するために CSS3 トランジションを使用しています。単一のページではまったく問題ありません。問題は、このページにアクセスしようとすると、コンテンツがクリアされてしまうことです。このページをそのままにして、背景画像をダウンロードし、同時に透明度を下げます。そして、ページが表示されるときに、動的にノードを追加します。このとき、直接現れるのは、その後のエフェクトです。テストコードを貼り付けます

<!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>

ログイン後にコピー

アニメーションは実現できますトランジションは効果を生成できません