如何仅在元素滚动到视图中时激活 CSS3 动画？

当内容滚动到视图中时激活 CSS3 动画

查询引发了一个问题，即条形图的动画在页面加载时激活，尽管图表位置偏离 -屏幕。目标是仅当查看器向下滚动并且图表进入视图时才触发动画。

捕获滚动事件

要实现此目的，可以使用 JavaScript 或 jQuery 来监视滚动事件并确定元素何时进入视口。一旦检测到，就可以启动动画。

在下面的代码中，JavaScript 用于在元素可见时为其添加“start”类，从而触发动画：

<div class="bar">
    <div class="level eighty">80%</div>
</div>

.eighty.start {
    width: 0px;
    background: #aae0aa;
    animation: eighty 2s ease-out forwards;
}

function isElementInViewport(elem) {
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

function checkAnimation() {
    var $elem = $('.bar .level');
    if ($elem.hasClass('start')) return;
    if (isElementInViewport($elem)) {
        $elem.addClass('start');
    }
}

$(window).scroll(function(){
    checkAnimation();
});

通过实施此解决方案，动画只会在条形图滚动到视图中时激活，从而提供更具吸引力的用户体验。

以上是如何仅在元素滚动到视图中时激活 CSS3 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！