动态切换父元素隐藏和显示里面的子元素的动画会再一次执行吗?
生活随笔
收集整理的這篇文章主要介紹了
动态切换父元素隐藏和显示里面的子元素的动画会再一次执行吗?
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
代碼：
完整代碼:
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title></title> <style?type="text/css"> *{ margin:?0; padding:?0; } .box{ background-color:?#00B83F; } .flag{ position:?fixed; width:?1px; height:?100%; background-color:?red; left:?400px; top:0; } .btn{ position:?fixed; bottom:?0; left:?0; right:?0; height:?100px; background-color:?rgba(0,0,0,.4); } .main{ width:?300px; height:?300px; background-color:?#ccc; animation:?move?3s?2; } @keyframes??move{ from{ transform:?translateX(0); } to{ transform:?translateX(100px); } } </style> </head> <body> <div?class="box"> <div?class="main"></div> </div> <div?class="flag"></div> <div?class="btn"> <button>顯示</button> <button>隱藏</button> </div> <script?src="js/jquery.js"?type="text/javascript"?charset="utf-8"></script> <script?type="text/javascript"> //?顯示 $('button:eq(0)').click(function(){ $('.box').show(); }); //?隱藏 $('button:eq(1)').click(function(){ $('.box').hide(); }); </script> </body> </html>經(jīng)過(guò)測(cè)試:
每次在切換顯示父元素時(shí)，子元素都會(huì)重新開(kāi)始執(zhí)行動(dòng)畫(huà)
轉(zhuǎn)載于:https://blog.51cto.com/11871779/2398923
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的动态切换父元素隐藏和显示里面的子元素的动画会再一次执行吗?的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： TCP/IP:IP多播选路
- 下一篇： 深入MySQL存储引擎分析锁和排序的原理