0

我准备了一个漂亮的三部分式 iPhone 式“pop”动画，准备使用一个“太长”的错误来呈现给用户。要使用它，我只需在隐藏的错误 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;
    ...
}
4

2 回答 2

1

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

于 2012-08-08T14:41:11.743 回答
0

jquery.show() 的默认持续时间为 400。

使用 jquery.show(0); 然后通过 $("#idElement").addClass("myOpacityClass"); 使用 css 不透明度为您的元素设置动画

于 2016-03-18T14:53:36.113 回答