我正在使用ReactModal,它为动画提供了CSS类(下面的示例(:
.ReactModal__Content {
opacity: 0;
}
.ReactModal__Content--after-open {
opacity: 1;
transition: opacity 150ms;
}
.ReactModal__Content--before-close {
opacity: 0;
}
我正在尝试对模态的进出进行动画处理。动画正在工作,但不是我想在近距离发生的反向动画......我对下面的动画属性做错了什么?
.ReactModal__Content {
animation-duration: 1s;
animation-name: fadeInUpBigXXX;
}
.ReactModal__Content--after-open {
animation-direction: normal;
}
.ReactModal__Content--before-close {
animation-direction: reverse;
}
@keyframes fadeInUpBigXXX {
from {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
模态的动画效果很好。但是在关闭时,模态不会执行反向淡入淡出的UpBigXXX动画。为什么?
默认情况下
,您的动画将只运行一次。所以一旦它第一次完成,它就完成了。您可以做的一件事是更改关闭前类中的动画迭代计数。例如,像这样:
.reverse {
animation-direction: reverse;
animation-iteration-count: 2;
transform: translate3d(0, 500px, 0);
opacity: 0;
}
.normal {
animation-direction: normal;
}
#test {
background-color: blue;
width: 100px;
height: 100px;
animation-duration: 4s;
animation-name: fadeInUpBigXXX;
}
@keyframes fadeInUpBigXXX {
from {
opacity: 0;
transform: translate3d(0, 500px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
https://jsfiddle.net/bjkbakg4/23/