如何在滚动到视图时触发 CSS3 动画？

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

问题

您正在使用 CSS3 动画来使条形图栩栩如生，但是动画在页面加载时开始。由于条形图由于前面的内容而被放置在屏幕外，所以当用户向下滚动查看它时，动画已完成。

解决方案：捕获滚动事件

关键在于捕获使用 JavaScript 或 jQuery 滚动事件。每次滚动时，代码都会检查条形图元素是否在视口内。一旦检测到元素的可见性，它就会通过添加启动动画的“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) {
    var $elem = $(elem);

    // Get scroll position
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get element position
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

function checkAnimation() {
    var $elem = $('.bar .level');

    // Prevent re-animation
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        $elem.addClass('start');
    }
}

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

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