我有一个使用 CSS3 制作动画的条形图，动画当前在页面加载时激活。
我遇到的问题是给定的条形图由于前面有很多内容而被放置在屏幕外，所以当用户向下滚动到它时，动画已经完成。
我一直在寻找通过 CSS3 或 jQuery 仅在查看者看到图表时激活条形图上的 CSS3 动画的方法。
<div>lots of content here, it fills the height of the screen and then some</div>
<div>animating bar chat here</div>
如果您在页面加载后立即快速向下滚动，您可以看到它的动画。
这是我的代码的一个jsfiddle。另外，我不知道这是否重要，但我在页面上有几个此条形图的实例。
我遇到了一个名为 waypoint 的 jQuery 插件，但我绝对没有运气让它工作。
如果有人能指出我正确的方向，那将非常有帮助。
谢谢！
这需要使用 JavaScript 或 jQuery 来捕获滚动事件，每次触发滚动事件时检查元素是否在视图中。
一旦元素在视图中，启动动画。在下面的代码中，这是通过向元素添加一个触发动画的“开始”类来完成的。
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) {
var $elem = $(elem);
// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
var viewportTop = $(scrollElem).scrollTop();
var viewportBottom = viewportTop + $(window).height();
// Get the position of the element on the page.
var elemTop = Math.round( $elem.offset().top );
var elemBottom = elemTop + $elem.height();
return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
// Check if it's time to start the animation.
function checkAnimation() {
var $elem = $('.bar .level');
// If the animation has already been started
if ($elem.hasClass('start')) return;
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('start');
}
}
// Capture scroll events
$(window).scroll(function(){
checkAnimation();
});
有时您需要动画始终在元素位于视口中时发生。如果这是您的情况，我稍微修改了 Matt jsfiddle代码以反映这一点。
jQuery
// Check if it's time to start the animation.
function checkAnimation() {
var $elem = $('.bar .level');
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('start');
} else {
$elem.removeClass('start');
}
}
为了激活 CSS 动画，需要在元素可见时添加一个类。正如其他答案所表明的那样，JS 是必需的，Waypoints是一个可以使用的 JS 脚本。
航点是滚动到元素时触发功能的最简单方法。
直到 Waypoints 版本 2，这曾经是一个相对简单的 jquery 插件。在版本 3 及更高版本（本指南版本 3.1.1）中引入了几个功能。为了完成上述操作，可以使用脚本的“查看快捷方式” ：
像往常一样将脚本添加到您的 HTML 中。
<script src="/path/to/lib/jquery.waypoints.min.js"></script>
<script src="/path/to/shortcuts/inview.min.js"></script>
添加以下 JS 代码，替换#myelement为适当的 HTML 元素 jQuery 选择器：
$(window).load(function () {
var in_view = new Waypoint.Inview({
element: $('#myelement')[0],
enter: function() {
$('#myelement').addClass('start');
},
exit: function() { // optionally
$('#myelement').removeClass('start');
}
});
});
我们使用这里$(window).load()解释的原因。
在这里更新了马特的小提琴。
您不再需要捕获滚动事件
自 2020 年以来，每个浏览器都能够通知您的视口中是否可见元素。
与路口观察者。
<style>
.trigger{
width: 100px;
height: 2px;
position: fixed;
top: 20%;
left: 0;
background: red;
opacity: 0;
z-index: -1;
}
</style>
<script>
$('body').append('<div class="trigger js-trigger"></div>');
$(document).scroll(function () {
$('YOUR SECTIONS NAME').each(function () {
let $this = $(this);
if($this.offset().top <= $('.js-trigger').offset().top) {
if (!$this.hasClass('CLASS NAME FOR CHECK ACTIVE SECTION')) {
$this
.addClass('currSec')
.siblings()
.removeClass('currSec');
}
}
});
});
</script>
除了这些答案，请考虑以下几点：
1- 检查视图中的元素有很多注意事项：
如何判断 DOM 元素在当前视口中是否可见？
2-如果有人想对动画有更多的控制（例如设置“动画类型”和“开始延迟”），这里有一篇很好的文章：
http ://blog.webbb.be/trigger-css-animation-滚动/
3-而且似乎没有延迟调用addClass （使用setTimeout）是无效的。