如何启动CSS3动画当它在视口 | 如何启动CSS3动画当它在视口

本文介绍了如何启动CSS3动画当它在视口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有与CSS3动画和动画当前激活的页面加载的柱状图。

I have a bar chart that animates with CSS3 and the animation currently activates as the page loads.

由于条形图是不是在视图时页面加载，你就必须向下滚动才能看到它和你给它的时间，动画已经加载。
所以，我所要做的是，有CSS3动画激活，当有人使用JS滚动到它。

Since the bar chart isn't in view when page loads, you'd have to scroll down to see it and by the time you get to it, the animation has already loaded.So what I am trying to do is, have the CSS3 animation activate when someone scrolls to it by using js.

下面是什么，我试图做一个样本：

Here is a sample of what I am trying to do:

我想我错过了什么或做一些错误的.js和.css。

I think I am miss something or doing something wrong in .js and .css.

    // Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.skiller #skill');

    // If the animation has already been started
    if ($elem.hasClass('html5')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('html5');
    }
}

感谢你们提前！

推荐答案

这是我如何做到这一点：

this is how i do it:

function isElementInViewport(){
            var scrollTop = $(window).scrollTop();
            var viewportHeight = $(window).height();
            $('.skiller #skill:not(.html5)').each(function(){
                var top = $(this).offset().top;
                if(scrollTop + viewportHeight >= top ){
                    $(this).addClass('html5');
                }
            });
        }
$(isElementInViewport);
$(window).scroll(isElementInViewport);

这篇关于如何启动CSS3动画当它在视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！