觸發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動畫（）

回答

相關問題