Javascript 如何延迟html/css加载直到项目在视口中

我在图表上有一个动画，但我希望CSS动画在进入“用户”视口后加载。当前，它在页面加载上加载，但这意味着一旦用户滚动到该部分，动画已经发生

HTML和CSS如下所示：

.chart[数据百分比='100'].外部{
笔划偏移：0；
-webkit动画：show1002s；
动画：show1002s；
}
.图表[数据百分比='96'].外部{
行程偏移：22；
-webkit动画：show96 2s；
动画：show962s；
}
.图表[数据百分比='77'].外部{
行程偏移：123；
-webkit动画：show752s；
动画：show752s；
}
.图表[数据百分比='75'].外部{
行程偏移量：133；
-webkit动画：show752s；
动画：show752s；
}
.图表[数据百分比='52'].外部{
行程偏移：257；
-webkit动画：show52 2s；
动画：show522s；
}
.图表[数据百分比='50'].外部{
行程偏移：267；
-webkit动画：show502s；
动画：show502s；
}
.图表[数据百分比='25'].外部{
行程偏移量：401；
-webkit动画：show252s；
动画：show252s；
}
@-webkit关键帧显示100{
从{
行程偏移：537；
}
到{
笔划偏移：0；
}
}
@关键帧显示96{
从{
行程偏移：537；
}
到{
行程偏移：22；
}
}
@关键帧显示75{
从{
行程偏移：537；
}
到{
行程偏移：124；
}
}
@-webkit关键帧显示52{
从{
行程偏移：537；
}
到{
行程偏移：257；
}
}
@-webkit关键帧显示50{
从{
行程偏移：537；
}
到{
行程偏移：267；
}
}
@关键帧显示25{
从{
行程偏移：537；
}
到{
行程偏移量：401；
}
}

52%
通过活动产生的销售额增加
77%
前两个月的投资回报率

96%
提高所产生销售线索的质量

您可以签出，它告诉您元素何时在视口中可见。你可以听它，然后开始你的动画。

一个非常干净的方法是使用vanilla JS。

2017年克里斯·费迪南迪 var isInViewport=函数（元素）{ var distance=elem.getBoundingClientRect（）； 返回( distance.top>=0&& 距离左>=0&&

---

distance.bottomJavaScript库，用于在元素滚动到视图中时设置其动画

---

简而言之：1）当元素进入视口时，应通过切换类激活动画；2）您知道元素在视口中，例如：我为您制作了一个片段，并修复了无效的

// (c) 2017 Chris Ferdinandi
var isInViewport = function (elem) {
    var distance = elem.getBoundingClientRect();
    return (
        distance.top >= 0 &&
        distance.left >= 0 &&
        distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        distance.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

var findMe = document.querySelector('.row stat-wheel');

window.addEventListener('scroll', function (event) {
    if (isInViewport(findMe)) {
        console.log('In viewport!');
    } else {
    console.log('Nope...');
  }
}, false);