ホームページ > 記事 > ウェブフロントエンド > ノードを動的に追加するとCSS3の遷移アニメーション効果が実現できない問題_html/css_WEB-ITnose
ノードを動的に追加するとCSS3の遷移アニメーション効果が実現できない問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:37:211626ブラウズ
アニメーション効果を実現するために 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> アニメーションは実現できます トランジションは効果を生成できません
ディスカッションへの返信 (解決策)
トランジションをアニメーションに置き換えることはできません遷移してからアニメーションを呼び出して、アニメーションの再生を継続させます
問題を解決します
2 つのアニメーションを作成し、setTimeOut を使用して定期的に切り替える
完了
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。