我在一个项目上使用了几种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');
这样的事情应该起作用。
$(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语句来查找元素是否在视图端口内，并添加和删除类。您可以使用以下命令切换元素的可见性：
.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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句