问题：
在内容滚动到视图之前加载动画条形图，导致错过了
解决方案：
滚动到视图时激活 CSS3 动画：
1.捕获滚动事件
实现监视滚动事件的 JavaScript 或 jQuery 事件侦听器。
2.检查元素可见性
对于每个滚动事件，检查元素（条形图）在用户视口中是否可见。
3.开始动画
元素变得可见（例如，当isElementInViewport()）返回true时），通过应用适当的CSS类（例如，“start”）来启动动画.
示例代码：
<!-- HTML -->
<div class="bar">
<div class="level eighty">80%</div>
</div><!-- CSS -->
.eighty.start {
width: 0px;
background: #aae0aa;
-webkit-animation: eighty 2s ease-out forwards;
-moz-animation: eighty 2s ease-out forwards;
-ms-animation: eighty 2s ease-out forwards;
-o-animation: eighty 2s ease-out forwards;
animation: eighty 2s ease-out forwards;
}<!-- jQuery -->
function isElementInViewport(elem) {
// Calculate element and viewport positions
// ...
return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
function checkAnimation() {
$elem = $('.bar .level');
// Prevent redundant animation start
if ($elem.hasClass('start')) return;
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('start');
}
}
$(window).scroll(function(){
checkAnimation();
});以上是如何仅在元素滚动到视图中时触发 CSS3 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！
