内容滚动到视图时激活CSS3animation
我有一个条形图，animationCSS3和animation当前激活页面加载。
我的问题是给定的条形图由于之前有很多内容而被放置在屏幕之外，所以当用户向下滚动时，animation已经完成。
我正在寻找通过CSS3或jQuery的方式，只有当查看器查看图表时才激活条形图上的CSS3animation。
<div>lots of content here, it fills the height of the screen and then some</div> <div>animating bar chat here</div> 如果您在页面加载后向下滚动，您可以看到它的animation。
这是我的代码jsfiddle 。 此外，我不知道这是否重要，但我有这个条形图在页面上的几个实例。
我遇到了一个名为waypoint的jQuery插件，但我绝对没有运气让它工作。
如果有人能把我指向正确的方向，这将是非常有益的。
谢谢！
捕获滚动事件
这需要使用JavaScript或jQuery来捕获滚动事件，每次检查滚动事件时检查元素是否在视图中。
一旦元素在视图中，开始animation。 在下面的代码中，这是通过向元素添加一个“start”类来完成的，这会触发animation。
更新的演示
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(); });
有时，当元素位于视口中时，您总是需要animation。 如果这是你的情况，我稍微修改马特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'); } }
为了激活一个CSSanimation，当这个元素变得可见时，需要将一个类添加到元素中。 正如其他答案已经表明，JS是必需的， Waypoints是一个JS脚本，可以使用。
航点是滚动到某个元素时最简单的方法。
截至Waypoint版本2，这曾经是一个相对简单的jQuery插件。 在版本3及以上版本（本指南版本3.1.1）中已经介绍了几个特性。 为了达到上述目的，可以使用脚本的“查看快捷键” ：
-
从这个链接或从Github下载并添加脚本文件（版本3 尚未通过CDNJS提供 ，尽pipeRawGit也是一个选项）。
-
像往常一样将脚本添加到您的HTML。
<script src="/path/to/lib/jquery.waypoints.min.js"></script> <script src="/path/to/shortcuts/inview.min.js"></script> -
添加以下JS代码，用相应的HTML元素jQueryselect器replace
#myelement：$(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()来解释这里的原因。
这里更新了Matt的小提琴。
除了这些答案，请考虑以下几点：
1-检查视图中的元素有很多注意事项：
如何判断一个DOM元素在当前视口中是否可见？
2-如果有人想要更多的控制animation（例如设置“ animationtypes ”和“ 启动延迟 ”），这里有一个很好的文章：
http://blog.webbb.be/trigger-css-animation-scroll/
3，而且似乎没有延迟调用addClass （使用setTimeout ）是无效的。
