0
我試圖將animate.css中的「反彈」動畫實現爲React組件。如何使用ReactCSSTransitionGroup製作動畫?
到目前爲止,CSS我是:
// Animation Bounce
@-webkit-keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}
@keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
// Classes for ReactCSSTransitionGroup
.example-enter {
opacity: 0.01;
color: green;
}
.example-enter.example-enter-active {
opacity: 1;
color: red;
animation: bounce 5000ms ease-in;
}
.example-leave {
opacity: 1;
color: purple;
}
.example-leave.example-leave-active {
opacity: 0.01;
color: cyan;
animation: bounce 3000ms ease-in;
}
我的陣營代碼:
<ReactCSSTransitionGroup
transitionName="example"
transitionEnterTimeout={5000}
transitionLeaveTimeout={3000}>
<span key={key}>
{ item }
</span>
</ReactCSSTransitionGroup>
到目前爲止,它並未真正發揮作用,它使文本顯示爲紅色,但僅此它。我無法做出「反彈」的工作。
感謝您的幫助。
這實際上幫助我得到什麼,我需要做。非常感謝你。 – Madison