添加不工作的类时动画

我有一个JQuery和CSS3片段来创建“滚动到视图动画”。假设发生的是它不会启动动画，除非类动画的类别可见。不断发生的事情是它增加了类可见但动画不会触发。我已经在所有浏览器中测试过这个，并且似乎正确地做到这一点的唯一一个是Safari。我想让这个跨浏览器兼容。任何帮助将是伟大的！添加不工作的类时动画

下面是摘录的小提琴：http://jsfiddle.net/M6VLL/

这里是JS：

(function(e){e.fn.visible=function(t,n,r){var i=e(this).eq(0),s=i.get(0),o=e(window),u=o.scrollTop(),a=u+o.height(),f=o.scrollLeft(),l=f+o.width(),c=i.offset().top,h=c+i.height(),p=i.offset().left,d=p+i.width(),v=t===true?h:c,m=t===true?c:h,g=t===true?d:p,y=t===true?p:d,b=n===true?s.offsetWidth*s.offsetHeight:true,r=r?r:"both";if(r==="both")return!!b&&m<=a&&v>=u&&y<=l&&g>=f;else if(r==="vertical")return!!b&&m<=a&&v>=u;else if(r==="horizontal")return!!b&&y<=l&&g>=f}})(jQuery) 

jQuery(window).scroll(function(event) { 

    jQuery(".animated").each(function(i, el) { 
    var el = jQuery(el); 
    if (el.visible(true)) { 
     el.addClass("visible"); 
    } 
    }); 

});

这里是CSS：

.animated { opacity: 0;} 
.animated.visible { 
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    opacity: 1; 
} 
@-webkit-keyframes slideInLeft { 
    0% { 
    opacity: 0; 
    -webkit-transform: translateX(-2000px); 
    transform: translateX(-2000px); 
    } 

    100% { 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    } 
} 

@keyframes slideInLeft { 
    0% { 
    opacity: 0; 
    -webkit-transform: translateX(-2000px); 
    -ms-transform: translateX(-2000px); 
    transform: translateX(-2000px); 
    } 

    100% { 
    -webkit-transform: translateX(0); 
    -ms-transform: translateX(0); 
    transform: translateX(0); 
    } 
} 

.slideInLeft { 
    -webkit-animation-name: slideInLeft; 
    animation-name: slideInLeft; 
}

来源

2014-03-27 simpleminded

你可以看到什么是使用开发工具您的问题。

您最初设置：

.slideInLeft { 
    -webkit-animation-name: slideInLeft; 
    animation-name: slideInLeft; 
}

，你的想法是，因为你没有设置剩余的调性质，这将不会做任何事情。

但是，如果你看看真正的性能（与开发工具），你会看到，剩余的属性被设置为

-webkit-animation-delay: 0s; 
-webkit-animation-direction: normal; 
-webkit-animation-duration: 0s; 
-webkit-animation-fill-mode: none; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-name: slideInLeft; 
-webkit-animation-play-state: running;

这意味着动画已经运行！

当你设置.visible类时，你改变了一些动画属性，但是太迟了，动画已经完成了。

来源

2014-03-30 19:08:49 vals

这似乎是问题所在。我一直在搞乱这些属性，但是当添加“可见”类时，似乎无法激活它。我现在在Firefox中运行它，但仍然没有运气让它在Chrome中重新工作并在IE中工作。有任何想法吗？这是更新的小提琴：[link]（http://jsfiddle.net/6ELFY/） – simpleminded

你不需要为动画这个，你可以使用转换。我也会用translateX(-100%)而不是你所拥有的东西，所以你肯定它会花费必要的金额，永远不会超过它。要使其跨浏览器，您只需添加其他前缀。我也用一个else声明，使其返回到其默认位置时页面上下滚动时

Demo

来源

2014-03-27 23:16:45

我之所以这样设置是因为我使用了Daneden的Animate.css。我构建WP主题，并一直试图让它设置为自定义，并能够使用所有不同的效果。这种用法可以在Chrome和Safari中使用，但从不使用IE或FF。现在我试图让它在所有浏览器中都能正常工作。我也有意设立只触发一次。 – simpleminded

添加不工作的类时动画

回答

相关问题