当内容滚动到视图中时，激活CSS3动画

Question

我有一个用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。另外，我不知道这是否重要，但是我在页面上有此条形图的多个实例。我遇到了一个名为Waypoint的jQuery插件，但是我绝对没有运气。如果有人可以指出正确的方向，那将非常有帮助。谢谢！

Answer 1

为了激活CSS动画，需要在元素可见时将一个类添加到该元素。正如其他答案所表明的那样，为此需要JS，而Waypoints是可以使用的JS脚本。

航点是滚动到某个元素时触发功能的最简单方法。

在Waypoints版本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()说明的原因。