我有与CSS3动画和动画当前激活的页面加载的柱状图。
我的问题是，给定的条形图筛置于关闭，由于大量的内容之前，它如此的时候用户向下滚动到它，动画已经结束。
我一直在寻找的方法或者通过CSS3或jQuery的时候观众看到图表只激活条形图的CSS3动画。
<div>lots of content here, it fills the height of the screen and then some</div>
<div>animating bar chat here</div>
如果你的页面加载后向下滚动真快吧，你可以看到它的动画。
这里是一个的jsfiddle我的代码。 另外，我不知道这是否重要，但我有在页面上此条形图的几个实例。
我曾经碰到过一个jQuery插件称为航点，但我绝对没有运气得到它的工作。
如果有人能在正确的方向指向我，这将是非常有益的。
谢谢！
这需要使用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);
// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
var viewportTop = $(scrollElem).scrollTop();
var viewportBottom = viewportTop + $(window).height();
// Get the position of the element on the page.
var elemTop = Math.round( $elem.offset().top );
var elemBottom = elemTop + $elem.height();
return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
// Check if it's time to start the animation.
function checkAnimation() {
var $elem = $('.bar .level');
// If the animation has already been started
if ($elem.hasClass('start')) return;
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('start');
}
}
// Capture scroll events
$(window).scroll(function(){
checkAnimation();
});
有时你需要的动画时，该元素是在视口中总是发生。 如果您遇到这种情况，我稍微修改马特的jsfiddle代码，以反映这一点。
jQuery的
// Check if it's time to start the animation.
function checkAnimation() {
var $elem = $('.bar .level');
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('start');
} else {
$elem.removeClass('start');
}
}
为了激活一个CSS动画，一类需要被添加到元素时，这变得可见。 至于其他的答案表明，JS是必需的，这和航点是一个JS脚本可以使用。
航点是当您滚动到元件以触发功能的最简单方法。
截至航点2版本，这曾经是一个相对简单的jQuery插件。 在3以上的版本（在本指南版本3.1.1）几个功能已被引入。 为了实现上述与此相关， “inview快捷键”的脚本，可以使用：
下载并从添加脚本文件， 该链接或从Github上 （第3版尚未公布通过CDNJS ，虽然RawGit始终是一个选项太）。
将脚本添加到您的HTML像往常一样。
<script src="/path/to/lib/jquery.waypoints.min.js"></script> <script src="/path/to/shortcuts/inview.min.js"></script> 添加以下JS代码，替换#myelement与适当的HTML元素jQuery选择：
$(window).load(function () { var in_view = new Waypoint.Inview({ element: $('#myelement')[0], enter: function() { $('#myelement').addClass('start'); }, exit: function() { // optionally $('#myelement').removeClass('start'); } }); }); 我们使用$(window).load()的原因说明这里 。
更新了马特的小提琴这里 。
除了这些问题的答案，请考虑以下几点：
1-检查鉴于元件具有许多考虑因素：
如何判断一个DOM元素在当前视口可见？
2 -如果有人想有过动画的更多控制（例如设置为“ 动画类型 ”和“ 开机延时 ”）在这里是一个关于它的好文章：
http://blog.webbb.be/trigger-css-animation-scroll/
3-和也似乎调用addClass无（使用的setTimeout）的延迟是不能奏效的。
CSS FOR TRIGGER :
.trigger{
width: 100px;
height: 2px;
position: fixed;
top: 20%;
left: 0;
background: red;
opacity: 0;
z-index: -1;
}
<script>
$('body').append('<div class="trigger js-trigger"></div>');
$(document).scroll(function () {
$('YOUR SECTIONS NAME').each(function () {
let $this = $(this);
if($this.offset().top <= $('.js-trigger').offset().top) {
if (!$this.hasClass('CLASS NAME FOR CHECK ACTIVE SECTION')) {
$this
.addClass('currSec')
.siblings()
.removeClass('currSec');
}
}
});
});
</script>
