大佬教程收集整理的这篇文章主要介绍了当父元素具有可见性时,是否会运行CSS3动画:隐藏?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
animation: myAnimation 2.1s cubic-bezier(0.65,0.815,0.735,0.395) infinite;
即使你看不到它,如果父元素具有可见性:隐藏,这个动画是否正在运行(和消耗资源)?
window.onload = function() { var animEl = document.querySelector('.animated'); var outputEl = document.querySelector('.output'); window.setTimeout(function() { outputEl.textContent = 'Margin left when visibility becomes hidden: ' + window.getComputedStyle(animEl).marginLeft; document.querySelector('.wrapper').style.visibility = 'hidden'; window.setTimeout(function() { outputEl.textContent = 'Margin left when visibility becomes visible: ' + window.getComputedStyle(animEl).marginLeft; document.querySelector('.wrapper').style.visibility = 'visible'; },1000); },1000); }
.wrapper{ white-space: nowrap; } .wrapper > div { display: inline-block; height: 100px; width: 100px; border: 1px solid; } .animated { animation: move 3s linear infinite; } @keyframes move { to { margin-left: 300px; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class='wrapper'> <div class='animated'></div> <div class='sibling'></div> </div> <div class='output'></div>
根据W3C Spec,只设置display:none终止正在运行的动画(我们可以将其视为不会启动动画).
正如您在下面的代码段中所看到的,当显示设置为none时动画终止,并在设置回块时从第一个关键帧重新启动.
window.onload = function() { var animEl = document.querySelector('.animated'); var outputEl = document.querySelector('.output'); window.setTimeout(function() { outputEl.textContent = 'Margin left when display becomes none: ' + window.getComputedStyle(animEl).marginLeft; document.querySelector('.wrapper').style.display = 'none'; window.setTimeout(function() { outputEl.textContent = 'Margin left when display becomes block: ' + window.getComputedStyle(animEl).marginLeft; document.querySelector('.wrapper').style.display = 'block'; },1000); }
.wrapper { white-space: nowrap; } .wrapper > div { display: inline-block; height: 100px; width: 100px; border: 1px solid; } .animated { animation: move 3s linear infinite; } @keyframes move { to { margin-left: 300px; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class='wrapper'> <div class='animated'></div> <div class='sibling'></div> </div> <div class='output'></div>
以上是大佬教程为你收集整理的当父元素具有可见性时,是否会运行CSS3动画:隐藏?全部内容,希望文章能够帮你解决当父元素具有可见性时,是否会运行CSS3动画:隐藏?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。