jquery - 在 jquery.show() 上触发 CSS3 动画

Question

我有一个漂亮的小三部分 iPhone 风格的“流行”动画，准备使用“太长”的错误来呈现给用户。要使用它，我只需在隐藏的错误 div 上调用 .show()。在 Safari 下它运行得很漂亮，但在 Firefox 下它只是砰的一声着陆，完全跳过动画，只是做一个常规的旧 .show()。

我该怎么做才能让它在 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;
    ...
}

Answer 1

只需将您的选择器设置为#error.active 并在显示该元素后添加.active 类..