触发jQuery的.show上的CSS3动画（）

我有一个很好的小三部分iPhone的“流行”动画准备用于“太长”的错误，以呈现给用户。要使用它，我只需在隐藏的错误div上调用.show（）。在Safari浏览器中它的效果非常好，但是在Firefox下，它只是一声巨响，完全忽略了动画，只是做了一个普通的旧.show（）。触发jQuery的.show上的CSS3动画（）

我该怎么做才能让它在mozilla下工作呢？

相关的CSS：

@-webkit-keyframes pop-in { 
    0% { opacity: 0;-moz-transform: scale(0);-webkit-transform: scale(0); } 
    50% { opacity: 1;-moz-transform: scale(1.5);-webkit-transform: scale(1.5); } 
    100% { opacity: 1;-moz-transform: scale(1);-webkit-transform: scale(1); } 
} 

@-moz-keyframes pop-in { 
    0% { opacity: 0;-moz-transform: scale(0);-webkit-transform: scale(0); } 
    50% { opacity: 1;-moz-transform: scale(1.5);-webkit-transform: scale(1.5); } 
    100% { opacity: 1;-moz-transform: scale(1);-webkit-transform: scale(1); } 
} 

@-ms-keyframes pop-in { 
    0% { opacity: 0;-moz-transform: scale(0);-webkit-transform: scale(0); } 
    50% { opacity: 1;-moz-transform: scale(1.5);-webkit-transform: scale(1.5); } 
    100% { opacity: 1;-moz-transform: scale(1);-webkit-transform: scale(1); } 
} 

@keyframes pop-in { 
    0% { opacity: 0;transform: scale(0);transform: scale(0); } 
    50% { opacity: 1;transform: scale(1.5);transform: scale(1.5); } 
    100% { opacity: 1;transform: scale(1);transform: scale(1); } 
} 


#error { 
    ... 
    -webkit-animation:pop-in 0.3s; 
    -moz-animation:pop-in 0.3s; 
    -ms-animation:pop-in 0.3s; 
    animation:pop-in 0.3s; 
    ... 
}

来源

2012-08-08 John Wells

看看这个：http://stackoverflow.com/questions/11829032/css-animation-pausing-when-element-is-hidden。基本上，您可以将CSS动画放入单独的类中，并根据需要添加和删除。 – frenchie 2012-08-08 14:42:27

只要让你的选择，以＃error.active和显示元素之后，添加。主动类..

来源

2012-08-08 14:41:11 DerWaldschrat

工作得很好，很简单！很难相信我没有想到它。谢谢！ – 2012-08-08 14:49:55

jquery.show（）有一个默认的持续时间（0）;

使用jquery.show（0）; 然后通过$（“＃idElement”）。添加CSS（“myOpacityClass”）;

来源

2016-03-18 14:53:36 maahou

触发jQuery的.show上的CSS3动画（）

回答

相关问题