vue中显示和隐藏如何做动画_Vue--过渡动画实现的三种方式
1 @charset "UTF-8";2
3 /*!4 * animate.css -http://daneden.me/animate5 * Version - 3.5.26 * Licensed under the MIT license - http://opensource.org/licenses/MIT7 *8 * Copyright (c) 2017 Daniel Eden9 */
10
11 .animated {12 animation-duration: 1s;13 animation-fill-mode: both;14 }15
16 .animated.infinite {17 animation-iteration-count: infinite;18 }19
20 .animated.hinge {21 animation-duration: 2s;22 }23
24 .animated.flipOutX,25 .animated.flipOutY,26 .animated.bounceIn,27 .animated.bounceOut {28 animation-duration: .75s;29 }30
31 @keyframes bounce {32 from, 20%, 53%, 80%, to {33 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);34 transform: translate3d(0,0,0);35 }36
37 40%, 43%{38 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);39 transform: translate3d(0, -30px, 0);40 }41
42 70%{43 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);44 transform: translate3d(0, -15px, 0);45 }46
47 90%{48 transform: translate3d(0,-4px,0);49 }50 }51
52 .bounce {53 animation-name: bounce;54 transform-origin: center bottom;55 }56
57 @keyframes flash {58 from, 50%, to {59 opacity: 1;60 }61
62 25%, 75%{63 opacity: 0;64 }65 }66
67 .flash {68 animation-name: flash;69 }70
71 /*originally authored by Nick Pettit - https://github.com/nickpettit/glide*/
72
73 @keyframes pulse {74 from {75 transform: scale3d(1, 1, 1);76 }77
78 50%{79 transform: scale3d(1.05, 1.05, 1.05);80 }81
82 to {83 transform: scale3d(1, 1, 1);84 }85 }86
87 .pulse {88 animation-name: pulse;89 }90
91 @keyframes rubberBand {92 from {93 transform: scale3d(1, 1, 1);94 }95
96 30%{97 transform: scale3d(1.25, 0.75, 1);98 }99
100 40%{101 transform: scale3d(0.75, 1.25, 1);102 }103
104 50%{105 transform: scale3d(1.15, 0.85, 1);106 }107
108 65%{109 transform: scale3d(.95, 1.05, 1);110 }111
112 75%{113 transform: scale3d(1.05, .95, 1);114 }115
116 to {117 transform: scale3d(1, 1, 1);118 }119 }120
121 .rubberBand {122 animation-name: rubberBand;123 }124
125 @keyframes shake {126 from, to {127 transform: translate3d(0, 0, 0);128 }129
130 10%, 30%, 50%, 70%, 90%{131 transform: translate3d(-10px, 0, 0);132 }133
134 20%, 40%, 60%, 80%{135 transform: translate3d(10px, 0, 0);136 }137 }138
139 .shake {140 animation-name: shake;141 }142
143 @keyframes headShake {144 0%{145 transform: translateX(0);146 }147
148 6.5%{149 transform: translateX(-6px) rotateY(-9deg);150 }151
152 18.5%{153 transform: translateX(5px) rotateY(7deg);154 }155
156 31.5%{157 transform: translateX(-3px) rotateY(-5deg);158 }159
160 43.5%{161 transform: translateX(2px) rotateY(3deg);162 }163
164 50%{165 transform: translateX(0);166 }167 }168
169 .headShake {170 animation-timing-function: ease-in-out;171 animation-name: headShake;172 }173
174 @keyframes swing {175 20%{176 transform: rotate3d(0, 0, 1, 15deg);177 }178
179 40%{180 transform: rotate3d(0, 0, 1, -10deg);181 }182
183 60%{184 transform: rotate3d(0, 0, 1, 5deg);185 }186
187 80%{188 transform: rotate3d(0, 0, 1, -5deg);189 }190
191 to {192 transform: rotate3d(0, 0, 1, 0deg);193 }194 }195
196 .swing {197 transform-origin: top center;198 animation-name: swing;199 }200
201 @keyframes tada {202 from {203 transform: scale3d(1, 1, 1);204 }205
206 10%, 20%{207 transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);208 }209
210 30%, 50%, 70%, 90%{211 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);212 }213
214 40%, 60%, 80%{215 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);216 }217
218 to {219 transform: scale3d(1, 1, 1);220 }221 }222
223 .tada {224 animation-name: tada;225 }226
227 /*originally authored by Nick Pettit - https://github.com/nickpettit/glide*/
228
229 @keyframes wobble {230 from {231 transform: none;232 }233
234 15%{235 transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);236 }237
238 30%{239 transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);240 }241
242 45%{243 transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);244 }245
246 60%{247 transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);248 }249
250 75%{251 transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);252 }253
254 to {255 transform: none;256 }257 }258
259 .wobble {260 animation-name: wobble;261 }262
263 @keyframes jello {264 from, 11.1%, to {265 transform: none;266 }267
268 22.2%{269 transform: skewX(-12.5deg) skewY(-12.5deg);270 }271
272 33.3%{273 transform: skewX(6.25deg) skewY(6.25deg);274 }275
276 44.4%{277 transform: skewX(-3.125deg) skewY(-3.125deg);278 }279
280 55.5%{281 transform: skewX(1.5625deg) skewY(1.5625deg);282 }283
284 66.6%{285 transform: skewX(-0.78125deg) skewY(-0.78125deg);286 }287
288 77.7%{289 transform: skewX(0.390625deg) skewY(0.390625deg);290 }291
292 88.8%{293 transform: skewX(-0.1953125deg) skewY(-0.1953125deg);294 }295 }296
297 .jello {298 animation-name: jello;299 transform-origin: center;300 }301
302 @keyframes bounceIn {303 from, 20%, 40%, 60%, 80%, to {304 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);305 }306
307 0%{308 opacity: 0;309 transform: scale3d(.3, .3, .3);310 }311
312 20%{313 transform: scale3d(1.1, 1.1, 1.1);314 }315
316 40%{317 transform: scale3d(.9, .9, .9);318 }319
<