Benoît Boucart 的这个例子展示了当用户滚动出视图并返回时如何“重置”动画。这里的关键是第二个函数,它在元素滚动出视图时删除动画 css 类。我希望 WOW.js 能够实现这一点,但他们表示他们不打算这样做。
http://codepen.io/benske/pen/yJoqz
片段:
// Showed...
$(".revealOnScroll:not(.animated)").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) {
window.setTimeout(function(){
$this.addClass('animated ' + $this.data('animation'));
}, parseInt($this.data('timeout'),10));
} else {
$this.addClass('animated ' + $this.data('animation'));
}
}
});
// Hidden...
$(".revealOnScroll.animated").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
$(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
}
});