Home > Article > Web Front-end > CSS3的transition动画效果在动态添加节点的时候无法实现的问题_html/css_WEB-ITnose
CSS3的transition动画效果在动态添加节点的时候无法实现的问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:37:211627browse
我用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定时切换
完毕
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：less hack 兼容_html/css_WEB-ITnoseNext article：如何将一个绝对定位的div水平垂直居中对齐_html/css_WEB-ITnose