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

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

当元素的位置超出视口时，它会从视图中隐藏。为了优化性能，只有当元素出现在视口中时才能启动 CSS3 动画。这对于放置在页面下方且上方有大量内容的元素特别有用。

为了实现这一点，我们利用 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);

    // Scroll position
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Element position
    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中文网其他相关文章！