提交 3b3ae23f 编写于 作者: Y yiminghe

update animate

上级 0e6c4838
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
} }
.make-motion(@className, @keyframeName) { .make-motion(@className, @keyframeName) {
.@{className}-enter { .@{className}-enter, .@{className}-appear {
.motion-common(); .motion-common();
animation-play-state: paused; animation-play-state: paused;
} }
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
.motion-common(); .motion-common();
animation-play-state: paused; animation-play-state: paused;
} }
.@{className}-enter.@{className}-enter-active { .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
animation-name: ~"@{keyframeName}In"; animation-name: ~"@{keyframeName}In";
animation-play-state: running; animation-play-state: running;
} }
......
.fade-enter { .fade-enter, .fade-appear {
opacity: 0; opacity: 0;
.motion-common(); .motion-common();
animation-timing-function: @ease-out; animation-timing-function: @ease-out;
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
animation-play-state: paused; animation-play-state: paused;
} }
.fade-enter.fade-enter-active { .fade-enter.fade-enter-active, .fade-appear.fade-appear-active {
animation-name: fadeIn; animation-name: fadeIn;
animation-play-state: running; animation-play-state: running;
} }
......
.move-motion(@className, @keyframeName) { .move-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName); .make-motion(@className, @keyframeName);
.@{className}-enter { .@{className}-enter, .@{className}-appear {
opacity: 0; opacity: 0;
animation-timing-function: @ease-out-circ; animation-timing-function: @ease-out-circ;
} }
......
.slide-motion(@className, @keyframeName) { .slide-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName); .make-motion(@className, @keyframeName);
.@{className}-enter { .@{className}-enter, .@{className}-appear {
opacity: 0; opacity: 0;
animation-timing-function: @ease-out-quint; animation-timing-function: @ease-out-quint;
} }
......
.swing-motion(@className, @keyframeName) { .swing-motion(@className, @keyframeName) {
.@{className}-enter { .@{className}-enter, .@{className}-appear {
.motion-common(); .motion-common();
animation-play-state: paused; animation-play-state: paused;
} }
.@{className}-enter.@{className}-enter-active { .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
animation-name: ~"@{keyframeName}In"; animation-name: ~"@{keyframeName}In";
animation-play-state: running; animation-play-state: running;
} }
...@@ -27,4 +27,4 @@ ...@@ -27,4 +27,4 @@
80% { 80% {
transform: translateX(5px); transform: translateX(5px);
} }
} }
\ No newline at end of file
.zoom-motion(@className, @keyframeName) { .zoom-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName); .make-motion(@className, @keyframeName);
.@{className}-enter { .@{className}-enter, .@{className}-appear {
transform: scale(0, 0); // need this by yiminghe transform: scale(0, 0); // need this by yiminghe
animation-timing-function: @ease-out-quint; animation-timing-function: @ease-out-quint;
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册