如何在向上和向下滚动时触发CSS动画

Question

我在项目中使用了几个CSS动画，遇到的问题是这些动画只有在向下滚动时才会触发一次。我需要它们在用户每次滚动页面时都被触发，无论是向上还是向下滚动。

CSS

.slideRight{

    animation-name: slideRight;
    -webkit-animation-name: slideRight; 

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 

}

@keyframes slideRight {

    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }               
    100% {
        transform: translateX(0%);
    }   

}

@-webkit-keyframes slideRight {

    0% {
        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }

}

HTML

<div class="animation-test element-to-hide" style="visibility:visible;">Something</div>

JavaScript

$(window).scroll(function() {

    $('.animation-test').each(function(){

        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();

        if (imagePos < topOfWindow+400) {
            $(this).addClass("slideRight");
        }

    });

});

$('.element-to-hide').css('visibility', 'hidden');

JSFiddle

- David Martins

---

你使用jQuery，是否考虑过使用jQuery的动画效果而不是本地动画？它具有更好的跨浏览器支持（在IE9和B4中无法使用动画）。你可以使用jQuery UI进行增强。 - dewd

Answer 1

类似这样的代码应该可以运行。

运行示例

$(window).scroll(function () {
    $('.animation-test').each(function () {
        var imagePos = $(this).offset().top;
        var imageHeight = $(this).height();
        var topOfWindow = $(window).scrollTop();

        if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
            $(this).addClass("slideRight");
        } else {
            $(this).removeClass("slideRight");
        }
    });
});

基本上就是使用 if 语句来查找元素是否在视口内，并添加或删除类。您可以使用以下方法切换元素的可见性：

实际上，只需使用 if 语句查找元素是否在视口中，并添加和删除类即可。您可以使用以下代码切换元素的可见性：

.element-to-hide{
    visibility:hidden; 
} 
.slideRight {
    visibility: visible;
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out; 
}

- apaul

---

非常感谢。您的示例在向上滚动时很好，但是在向下滚动时，当触发动画时元素是可见的。关键是通过动画使元素进入页面。是否可能在动画触发之前将其设置为不可见？ - David Martins

嗨，保罗，感谢您的帮助。由于某种原因，它在你的 fiddle 上似乎运行良好，但在我的网站上则不是这样。请看一下这里。 - David Martins

保罗，首先感谢您的时间和努力。我在所有最新版本的Firefox、IE、Chrome、Opera和Safari中都看到了同样的情况。基本上，动画元素，在这种情况下是您在我的页面上看到的蝴蝶图形，只是在您向下滚动时完美地显示出来，然后它们消失并开始动画。 - David Martins

@DavidMartins 啊，抱歉... 你需要移除内联的 visibility: visible;。 - apaul

@DavidMartins <div class="content animation-test element-to-hide slideRight" style="visibility:visible;"> - apaul