Vue--过渡动画实现的三种方式
一.使用vue的transition标签结合css样式完成动画
1 <!DOCTYPE html>2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 /* .v-enter-active,.v-leave-active{
10 transition:all 2s;
11 }
12 .v-enter,.v-leave-to{
13 margin-left: 100px;
14 }
15 .v-enter-to,.v-leave{
16 margin-left:0px;
17 } */
18 .show-enter-active,.show-leave-active{
19 transition:all 2s;
20 }
21 .show-enter,.show-leave-to{
22 margin-left: 100px;
23 }
24 .show-enter-to,.show-leave{
25 margin-left:0px;
26 }
27 </style>
28 <script src="../vue2.4.4.js"></script>
29 </head>
30
31 <body>
32 <!-- 定义一个vue的管理区块，（MVVM中的View） -->
33 <!--
34 如果要使用动画效果:
35 第一种方式是使用transition标签加css样式结合完成：
36 1.给需要运动的元素加入transition标签
37 2.默认情况下如果控制了transition标签元素的显示和隐藏它会默认
38 给这个元素加入一些class
39 隐藏: 加入类名:
40 v-leave
41 v-leave-active
42 v-leave-to
43
44 显示: 加入类名:
45 v-enter 准备进行运动的状态(起始状态)
46 v-enter-active 整个运动状态
47 v-enter-to 整个运动状态(强调运动的结果，结束状态)
48 3.将来如果给transition设置一个name为“show”以后,将来所有的类的名称都需要改变，默认前缀为v-
49 如果加入了name属性，需要将v- 改为show-
50 -->
51 <div >
52 <button @click="toggle">显示/隐藏</button><br>
53 <!-- <transition > -->
54 <transition name="show" >
55 <span class="show" v-show="isshow">it 传说</span>
56 </transition>
57 </div>
58
59 </body>
60
61 <script>
62
63 // 实例化vue对象（MVVM中的View Model）
64 new Vue({
65 // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
66 el:'#app',
67 data:{
68 // 数据 （MVVM中的Model）
69 isshow:false
70 },
71 methods:{
72 toggle:function(){
73 this.isshow = !this.isshow;
74 }
75 }
76 })
77 </script>
78 </html>
二.利用animate.css结合transition实现动画
animate.css 演示地址 : https://daneden.github.io/animate.css/
1 @charset "UTF-8";2
3 /*!
4 * animate.css -http://daneden.me/animate
5 * Version - 3.5.2
6 * Licensed under the MIT license - http://opensource.org/licenses/MIT
7 *
8 * Copyright (c) 2017 Daniel Eden
9 */
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
320 60% {
321 opacity: 1;
322 transform: scale3d(1.03, 1.03, 1.03);
323 }
324
325 80% {
326 transform: scale3d(.97, .97, .97);
327 }
328
329 to {
330 opacity: 1;
331 transform: scale3d(1, 1, 1);
332 }
333 }
334
335 .bounceIn {
336 animation-name: bounceIn;
337 }
338
339 @keyframes bounceInDown {
340 from, 60%, 75%, 90%, to {
341 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
342 }
343
344 0% {
345 opacity: 0;
346 transform: translate3d(0, -3000px, 0);
347 }
348
349 60% {
350 opacity: 1;
351 transform: translate3d(0, 25px, 0);
352 }
353
354 75% {
355 transform: translate3d(0, -10px, 0);
356 }
357
358 90% {
359 transform: translate3d(0, 5px, 0);
360 }
361
362 to {
363 transform: none;
364 }
365 }
366
367 .bounceInDown {
368 animation-name: bounceInDown;
369 }
370
371 @keyframes bounceInLeft {
372 from, 60%, 75%, 90%, to {
373 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
374 }
375
376 0% {
377 opacity: 0;
378 transform: translate3d(-3000px, 0, 0);
379 }
380
381 60% {
382 opacity: 1;
383 transform: translate3d(25px, 0, 0);
384 }
385
386 75% {
387 transform: translate3d(-10px, 0, 0);
388 }
389
390 90% {
391 transform: translate3d(5px, 0, 0);
392 }
393
394 to {
395 transform: none;
396 }
397 }
398
399 .bounceInLeft {
400 animation-name: bounceInLeft;
401 }
402
403 @keyframes bounceInRight {
404 from, 60%, 75%, 90%, to {
405 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
406 }
407
408 from {
409 opacity: 0;
410 transform: translate3d(3000px, 0, 0);
411 }
412
413 60% {
414 opacity: 1;
415 transform: translate3d(-25px, 0, 0);
416 }
417
418 75% {
419 transform: translate3d(10px, 0, 0);
420 }
421
422 90% {
423 transform: translate3d(-5px, 0, 0);
424 }
425
426 to {
427 transform: none;
428 }
429 }
430
431 .bounceInRight {
432 animation-name: bounceInRight;
433 }
434
435 @keyframes bounceInUp {
436 from, 60%, 75%, 90%, to {
437 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
438 }
439
440 from {
441 opacity: 0;
442 transform: translate3d(0, 3000px, 0);
443 }
444
445 60% {
446 opacity: 1;
447 transform: translate3d(0, -20px, 0);
448 }
449
450 75% {
451 transform: translate3d(0, 10px, 0);
452 }
453
454 90% {
455 transform: translate3d(0, -5px, 0);
456 }
457
458 to {
459 transform: translate3d(0, 0, 0);
460 }
461 }
462
463 .bounceInUp {
464 animation-name: bounceInUp;
465 }
466
467 @keyframes bounceOut {
468 20% {
469 transform: scale3d(.9, .9, .9);
470 }
471
472 50%, 55% {
473 opacity: 1;
474 transform: scale3d(1.1, 1.1, 1.1);
475 }
476
477 to {
478 opacity: 0;
479 transform: scale3d(.3, .3, .3);
480 }
481 }
482
483 .bounceOut {
484 animation-name: bounceOut;
485 }
486
487 @keyframes bounceOutDown {
488 20% {
489 transform: translate3d(0, 10px, 0);
490 }
491
492 40%, 45% {
493 opacity: 1;
494 transform: translate3d(0, -20px, 0);
495 }
496
497 to {
498 opacity: 0;
499 transform: translate3d(0, 2000px, 0);
500 }
501 }
502
503 .bounceOutDown {
504 animation-name: bounceOutDown;
505 }
506
507 @keyframes bounceOutLeft {
508 20% {
509 opacity: 1;
510 transform: translate3d(20px, 0, 0);
511 }
512
513 to {
514 opacity: 0;
515 transform: translate3d(-2000px, 0, 0);
516 }
517 }
518
519 .bounceOutLeft {
520 animation-name: bounceOutLeft;
521 }
522
523 @keyframes bounceOutRight {
524 20% {
525 opacity: 1;
526 transform: translate3d(-20px, 0, 0);
527 }
528
529 to {
530 opacity: 0;
531 transform: translate3d(2000px, 0, 0);
532 }
533 }
534
535 .bounceOutRight {
536 animation-name: bounceOutRight;
537 }
538
539 @keyframes bounceOutUp {
540 20% {
541 transform: translate3d(0, -10px, 0);
542 }
543
544 40%, 45% {
545 opacity: 1;
546 transform: translate3d(0, 20px, 0);
547 }
548
549 to {
550 opacity: 0;
551 transform: translate3d(0, -2000px, 0);
552 }
553 }
554
555 .bounceOutUp {
556 animation-name: bounceOutUp;
557 }
558
559 @keyframes fadeIn {
560 from {
561 opacity: 0;
562 }
563
564 to {
565 opacity: 1;
566 }
567 }
568
569 .fadeIn {
570 animation-name: fadeIn;
571 }
572
573 @keyframes fadeInDown {
574 from {
575 opacity: 0;
576 transform: translate3d(0, -100%, 0);
577 }
578
579 to {
580 opacity: 1;
581 transform: none;
582 }
583 }
584
585 .fadeInDown {
586 animation-name: fadeInDown;
587 }
588
589 @keyframes fadeInDownBig {
590 from {
591 opacity: 0;
592 transform: translate3d(0, -2000px, 0);
593 }
594
595 to {
596 opacity: 1;
597 transform: none;
598 }
599 }
600
601 .fadeInDownBig {
602 animation-name: fadeInDownBig;
603 }
604
605 @keyframes fadeInLeft {
606 from {
607 opacity: 0;
608 transform: translate3d(-100%, 0, 0);
609 }
610
611 to {
612 opacity: 1;
613 transform: none;
614 }
615 }
616
617 .fadeInLeft {
618 animation-name: fadeInLeft;
619 }
620
621 @keyframes fadeInLeftBig {
622 from {
623 opacity: 0;
624 transform: translate3d(-2000px, 0, 0);
625 }
626
627 to {
628 opacity: 1;
629 transform: none;
630 }
631 }
632
633 .fadeInLeftBig {
634 animation-name: fadeInLeftBig;
635 }
636
637 @keyframes fadeInRight {
638 from {
639 opacity: 0;
640 transform: translate3d(100%, 0, 0);
641 }
642
643 to {
644 opacity: 1;
645 transform: none;
646 }
647 }
648
649 .fadeInRight {
650 animation-name: fadeInRight;
651 }
652
653 @keyframes fadeInRightBig {
654 from {
655 opacity: 0;
656 transform: translate3d(2000px, 0, 0);
657 }
658
659 to {
660 opacity: 1;
661 transform: none;
662 }
663 }
664
665 .fadeInRightBig {
666 animation-name: fadeInRightBig;
667 }
668
669 @keyframes fadeInUp {
670 from {
671 opacity: 0;
672 transform: translate3d(0, 100%, 0);
673 }
674
675 to {
676 opacity: 1;
677 transform: none;
678 }
679 }
680
681 .fadeInUp {
682 animation-name: fadeInUp;
683 }
684
685 @keyframes fadeInUpBig {
686 from {
687 opacity: 0;
688 transform: translate3d(0, 2000px, 0);
689 }
690
691 to {
692 opacity: 1;
693 transform: none;
694 }
695 }
696
697 .fadeInUpBig {
698 animation-name: fadeInUpBig;
699 }
700
701 @keyframes fadeOut {
702 from {
703 opacity: 1;
704 }
705
706 to {
707 opacity: 0;
708 }
709 }
710
711 .fadeOut {
712 animation-name: fadeOut;
713 }
714
715 @keyframes fadeOutDown {
716 from {
717 opacity: 1;
718 }
719
720 to {
721 opacity: 0;
722 transform: translate3d(0, 100%, 0);
723 }
724 }
725
726 .fadeOutDown {
727 animation-name: fadeOutDown;
728 }
729
730 @keyframes fadeOutDownBig {
731 from {
732 opacity: 1;
733 }
734
735 to {
736 opacity: 0;
737 transform: translate3d(0, 2000px, 0);
738 }
739 }
740
741 .fadeOutDownBig {
742 animation-name: fadeOutDownBig;
743 }
744
745 @keyframes fadeOutLeft {
746 from {
747 opacity: 1;
748 }
749
750 to {
751 opacity: 0;
752 transform: translate3d(-100%, 0, 0);
753 }
754 }
755
756 .fadeOutLeft {
757 animation-name: fadeOutLeft;
758 }
759
760 @keyframes fadeOutLeftBig {
761 from {
762 opacity: 1;
763 }
764
765 to {
766 opacity: 0;
767 transform: translate3d(-2000px, 0, 0);
768 }
769 }
770
771 .fadeOutLeftBig {
772 animation-name: fadeOutLeftBig;
773 }
774
775 @keyframes fadeOutRight {
776 from {
777 opacity: 1;
778 }
779
780 to {
781 opacity: 0;
782 transform: translate3d(100%, 0, 0);
783 }
784 }
785
786 .fadeOutRight {
787 animation-name: fadeOutRight;
788 }
789
790 @keyframes fadeOutRightBig {
791 from {
792 opacity: 1;
793 }
794
795 to {
796 opacity: 0;
797 transform: translate3d(2000px, 0, 0);
798 }
799 }
800
801 .fadeOutRightBig {
802 animation-name: fadeOutRightBig;
803 }
804
805 @keyframes fadeOutUp {
806 from {
807 opacity: 1;
808 }
809
810 to {
811 opacity: 0;
812 transform: translate3d(0, -100%, 0);
813 }
814 }
815
816 .fadeOutUp {
817 animation-name: fadeOutUp;
818 }
819
820 @keyframes fadeOutUpBig {
821 from {
822 opacity: 1;
823 }
824
825 to {
826 opacity: 0;
827 transform: translate3d(0, -2000px, 0);
828 }
829 }
830
831 .fadeOutUpBig {
832 animation-name: fadeOutUpBig;
833 }
834
835 @keyframes flip {
836 from {
837 transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
838 animation-timing-function: ease-out;
839 }
840
841 40% {
842 transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
843 animation-timing-function: ease-out;
844 }
845
846 50% {
847 transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
848 animation-timing-function: ease-in;
849 }
850
851 80% {
852 transform: perspective(400px) scale3d(.95, .95, .95);
853 animation-timing-function: ease-in;
854 }
855
856 to {
857 transform: perspective(400px);
858 animation-timing-function: ease-in;
859 }
860 }
861
862 .animated.flip {
863 -webkit-backface-visibility: visible;
864 backface-visibility: visible;
865 animation-name: flip;
866 }
867
868 @keyframes flipInX {
869 from {
870 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
871 animation-timing-function: ease-in;
872 opacity: 0;
873 }
874
875 40% {
876 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
877 animation-timing-function: ease-in;
878 }
879
880 60% {
881 transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
882 opacity: 1;
883 }
884
885 80% {
886 transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
887 }
888
889 to {
890 transform: perspective(400px);
891 }
892 }
893
894 .flipInX {
895 -webkit-backface-visibility: visible !important;
896 backface-visibility: visible !important;
897 animation-name: flipInX;
898 }
899
900 @keyframes flipInY {
901 from {
902 transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
903 animation-timing-function: ease-in;
904 opacity: 0;
905 }
906
907 40% {
908 transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
909 animation-timing-function: ease-in;
910 }
911
912 60% {
913 transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
914 opacity: 1;
915 }
916
917 80% {
918 transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
919 }
920
921 to {
922 transform: perspective(400px);
923 }
924 }
925
926 .flipInY {
927 -webkit-backface-visibility: visible !important;
928 backface-visibility: visible !important;
929 animation-name: flipInY;
930 }
931
932 @keyframes flipOutX {
933 from {
934 transform: perspective(400px);
935 }
936
937 30% {
938 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
939 opacity: 1;
940 }
941
942 to {
943 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
944 opacity: 0;
945 }
946 }
947
948 .flipOutX {
949 animation-name: flipOutX;
950 -webkit-backface-visibility: visible !important;
951 backface-visibility: visible !important;
952 }
953
954 @keyframes flipOutY {
955 from {
956 transform: perspective(400px);
957 }
958
959 30% {
960 transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
961 opacity: 1;
962 }
963
964 to {
965 transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
966 opacity: 0;
967 }
968 }
969
970 .flipOutY {
971 -webkit-backface-visibility: visible !important;
972 backface-visibility: visible !important;
973 animation-name: flipOutY;
974 }
975
976 @keyframes lightSpeedIn {
977 from {
978 transform: translate3d(100%, 0, 0) skewX(-30deg);
979 opacity: 0;
980 }
981
982 60% {
983 transform: skewX(20deg);
984 opacity: 1;
985 }
986
987 80% {
988 transform: skewX(-5deg);
989 opacity: 1;
990 }
991
992 to {
993 transform: none;
994 opacity: 1;
995 }
996 }
997
998 .lightSpeedIn {
999 animation-name: lightSpeedIn;
1000 animation-timing-function: ease-out;
1001 }
1002
1003 @keyframes lightSpeedOut {
1004 from {
1005 opacity: 1;
1006 }
1007
1008 to {
1009 transform: translate3d(100%, 0, 0) skewX(30deg);
1010 opacity: 0;
1011 }
1012 }
1013
1014 .lightSpeedOut {
1015 animation-name: lightSpeedOut;
1016 animation-timing-function: ease-in;
1017 }
1018
1019 @keyframes rotateIn {
1020 from {
1021 transform-origin: center;
1022 transform: rotate3d(0, 0, 1, -200deg);
1023 opacity: 0;
1024 }
1025
1026 to {
1027 transform-origin: center;
1028 transform: none;
1029 opacity: 1;
1030 }
1031 }
1032
1033 .rotateIn {
1034 animation-name: rotateIn;
1035 }
1036
1037 @keyframes rotateInDownLeft {
1038 from {
1039 transform-origin: left bottom;
1040 transform: rotate3d(0, 0, 1, -45deg);
1041 opacity: 0;
1042 }
1043
1044 to {
1045 transform-origin: left bottom;
1046 transform: none;
1047 opacity: 1;
1048 }
1049 }
1050
1051 .rotateInDownLeft {
1052 animation-name: rotateInDownLeft;
1053 }
1054
1055 @keyframes rotateInDownRight {
1056 from {
1057 transform-origin: right bottom;
1058 transform: rotate3d(0, 0, 1, 45deg);
1059 opacity: 0;
1060 }
1061
1062 to {
1063 transform-origin: right bottom;
1064 transform: none;
1065 opacity: 1;
1066 }
1067 }
1068
1069 .rotateInDownRight {
1070 animation-name: rotateInDownRight;
1071 }
1072
1073 @keyframes rotateInUpLeft {
1074 from {
1075 transform-origin: left bottom;
1076 transform: rotate3d(0, 0, 1, 45deg);
1077 opacity: 0;
1078 }
1079
1080 to {
1081 transform-origin: left bottom;
1082 transform: none;
1083 opacity: 1;
1084 }
1085 }
1086
1087 .rotateInUpLeft {
1088 animation-name: rotateInUpLeft;
1089 }
1090
1091 @keyframes rotateInUpRight {
1092 from {
1093 transform-origin: right bottom;
1094 transform: rotate3d(0, 0, 1, -90deg);
1095 opacity: 0;
1096 }
1097
1098 to {
1099 transform-origin: right bottom;
1100 transform: none;
1101 opacity: 1;
1102 }
1103 }
1104
1105 .rotateInUpRight {
1106 animation-name: rotateInUpRight;
1107 }
1108
1109 @keyframes rotateOut {
1110 from {
1111 transform-origin: center;
1112 opacity: 1;
1113 }
1114
1115 to {
1116 transform-origin: center;
1117 transform: rotate3d(0, 0, 1, 200deg);
1118 opacity: 0;
1119 }
1120 }
1121
1122 .rotateOut {
1123 animation-name: rotateOut;
1124 }
1125
1126 @keyframes rotateOutDownLeft {
1127 from {
1128 transform-origin: left bottom;
1129 opacity: 1;
1130 }
1131
1132 to {
1133 transform-origin: left bottom;
1134 transform: rotate3d(0, 0, 1, 45deg);
1135 opacity: 0;
1136 }
1137 }
1138
1139 .rotateOutDownLeft {
1140 animation-name: rotateOutDownLeft;
1141 }
1142
1143 @keyframes rotateOutDownRight {
1144 from {
1145 transform-origin: right bottom;
1146 opacity: 1;
1147 }
1148
1149 to {
1150 transform-origin: right bottom;
1151 transform: rotate3d(0, 0, 1, -45deg);
1152 opacity: 0;
1153 }
1154 }
1155
1156 .rotateOutDownRight {
1157 animation-name: rotateOutDownRight;
1158 }
1159
1160 @keyframes rotateOutUpLeft {
1161 from {
1162 transform-origin: left bottom;
1163 opacity: 1;
1164 }
1165
1166 to {
1167 transform-origin: left bottom;
1168 transform: rotate3d(0, 0, 1, -45deg);
1169 opacity: 0;
1170 }
1171 }
1172
1173 .rotateOutUpLeft {
1174 animation-name: rotateOutUpLeft;
1175 }
1176
1177 @keyframes rotateOutUpRight {
1178 from {
1179 transform-origin: right bottom;
1180 opacity: 1;
1181 }
1182
1183 to {
1184 transform-origin: right bottom;
1185 transform: rotate3d(0, 0, 1, 90deg);
1186 opacity: 0;
1187 }
1188 }
1189
1190 .rotateOutUpRight {
1191 animation-name: rotateOutUpRight;
1192 }
1193
1194 @keyframes hinge {
1195 0% {
1196 transform-origin: top left;
1197 animation-timing-function: ease-in-out;
1198 }
1199
1200 20%, 60% {
1201 transform: rotate3d(0, 0, 1, 80deg);
1202 transform-origin: top left;
1203 animation-timing-function: ease-in-out;
1204 }
1205
1206 40%, 80% {
1207 transform: rotate3d(0, 0, 1, 60deg);
1208 transform-origin: top left;
1209 animation-timing-function: ease-in-out;
1210 opacity: 1;
1211 }
1212
1213 to {
1214 transform: translate3d(0, 700px, 0);
1215 opacity: 0;
1216 }
1217 }
1218
1219 .hinge {
1220 animation-name: hinge;
1221 }
1222
1223 @keyframes jackInTheBox {
1224 from {
1225 opacity: 0;
1226 transform: scale(0.1) rotate(30deg);
1227 transform-origin: center bottom;
1228 }
1229
1230 50% {
1231 transform: rotate(-10deg);
1232 }
1233
1234 70% {
1235 transform: rotate(3deg);
1236 }
1237
1238 to {
1239 opacity: 1;
1240 transform: scale(1);
1241 }
1242 }
1243
1244 .jackInTheBox {
1245 animation-name: jackInTheBox;
1246 }
1247
1248 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
1249
1250 @keyframes rollIn {
1251 from {
1252 opacity: 0;
1253 transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
1254 }
1255
1256 to {
1257 opacity: 1;
1258 transform: none;
1259 }
1260 }
1261
1262 .rollIn {
1263 animation-name: rollIn;
1264 }
1265
1266 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
1267
1268 @keyframes rollOut {
1269 from {
1270 opacity: 1;
1271 }
1272
1273 to {
1274 opacity: 0;
1275 transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
1276 }
1277 }
1278
1279 .rollOut {
1280 animation-name: rollOut;
1281 }
1282
1283 @keyframes zoomIn {
1284 from {
1285 opacity: 0;
1286 transform: scale3d(.3, .3, .3);
1287 }
1288
1289 50% {
1290 opacity: 1;
1291 }
1292 }
1293
1294 .zoomIn {
1295 animation-name: zoomIn;
1296 }
1297
1298 @keyframes zoomInDown {
1299 from {
1300 opacity: 0;
1301 transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1302 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1303 }
1304
1305 60% {
1306 opacity: 1;
1307 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1308 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1309 }
1310 }
1311
1312 .zoomInDown {
1313 animation-name: zoomInDown;
1314 }
1315
1316 @keyframes zoomInLeft {
1317 from {
1318 opacity: 0;
1319 transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
1320 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1321 }
1322
1323 60% {
1324 opacity: 1;
1325 transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
1326 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1327 }
1328 }
1329
1330 .zoomInLeft {
1331 animation-name: zoomInLeft;
1332 }
1333
1334 @keyframes zoomInRight {
1335 from {
1336 opacity: 0;
1337 transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
1338 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1339 }
1340
1341 60% {
1342 opacity: 1;
1343 transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
1344 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1345 }
1346 }
1347
1348 .zoomInRight {
1349 animation-name: zoomInRight;
1350 }
1351
1352 @keyframes zoomInUp {
1353 from {
1354 opacity: 0;
1355 transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
1356 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1357 }
1358
1359 60% {
1360 opacity: 1;
1361 transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
1362 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1363 }
1364 }
1365
1366 .zoomInUp {
1367 animation-name: zoomInUp;
1368 }
1369
1370 @keyframes zoomOut {
1371 from {
1372 opacity: 1;
1373 }
1374
1375 50% {
1376 opacity: 0;
1377 transform: scale3d(.3, .3, .3);
1378 }
1379
1380 to {
1381 opacity: 0;
1382 }
1383 }
1384
1385 .zoomOut {
1386 animation-name: zoomOut;
1387 }
1388
1389 @keyframes zoomOutDown {
1390 40% {
1391 opacity: 1;
1392 transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
1393 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1394 }
1395
1396 to {
1397 opacity: 0;
1398 transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
1399 transform-origin: center bottom;
1400 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1401 }
1402 }
1403
1404 .zoomOutDown {
1405 animation-name: zoomOutDown;
1406 }
1407
1408 @keyframes zoomOutLeft {
1409 40% {
1410 opacity: 1;
1411 transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
1412 }
1413
1414 to {
1415 opacity: 0;
1416 transform: scale(.1) translate3d(-2000px, 0, 0);
1417 transform-origin: left center;
1418 }
1419 }
1420
1421 .zoomOutLeft {
1422 animation-name: zoomOutLeft;
1423 }
1424
1425 @keyframes zoomOutRight {
1426 40% {
1427 opacity: 1;
1428 transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
1429 }
1430
1431 to {
1432 opacity: 0;
1433 transform: scale(.1) translate3d(2000px, 0, 0);
1434 transform-origin: right center;
1435 }
1436 }
1437
1438 .zoomOutRight {
1439 animation-name: zoomOutRight;
1440 }
1441
1442 @keyframes zoomOutUp {
1443 40% {
1444 opacity: 1;
1445 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1446 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1447 }
1448
1449 to {
1450 opacity: 0;
1451 transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
1452 transform-origin: center bottom;
1453 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1454 }
1455 }
1456
1457 .zoomOutUp {
1458 animation-name: zoomOutUp;
1459 }
1460
1461 @keyframes slideInDown {
1462 from {
1463 transform: translate3d(0, -100%, 0);
1464 visibility: visible;
1465 }
1466
1467 to {
1468 transform: translate3d(0, 0, 0);
1469 }
1470 }
1471
1472 .slideInDown {
1473 animation-name: slideInDown;
1474 }
1475
1476 @keyframes slideInLeft {
1477 from {
1478 transform: translate3d(-100%, 0, 0);
1479 visibility: visible;
1480 }
1481
1482 to {
1483 transform: translate3d(0, 0, 0);
1484 }
1485 }
1486
1487 .slideInLeft {
1488 animation-name: slideInLeft;
1489 }
1490
1491 @keyframes slideInRight {
1492 from {
1493 transform: translate3d(100%, 0, 0);
1494 visibility: visible;
1495 }
1496
1497 to {
1498 transform: translate3d(0, 0, 0);
1499 }
1500 }
1501
1502 .slideInRight {
1503 animation-name: slideInRight;
1504 }
1505
1506 @keyframes slideInUp {
1507 from {
1508 transform: translate3d(0, 100%, 0);
1509 visibility: visible;
1510 }
1511
1512 to {
1513 transform: translate3d(0, 0, 0);
1514 }
1515 }
1516
1517 .slideInUp {
1518 animation-name: slideInUp;
1519 }
1520
1521 @keyframes slideOutDown {
1522 from {
1523 transform: translate3d(0, 0, 0);
1524 }
1525
1526 to {
1527 visibility: hidden;
1528 transform: translate3d(0, 100%, 0);
1529 }
1530 }
1531
1532 .slideOutDown {
1533 animation-name: slideOutDown;
1534 }
1535
1536 @keyframes slideOutLeft {
1537 from {
1538 transform: translate3d(0, 0, 0);
1539 }
1540
1541 to {
1542 visibility: hidden;
1543 transform: translate3d(-100%, 0, 0);
1544 }
1545 }
1546
1547 .slideOutLeft {
1548 animation-name: slideOutLeft;
1549 }
1550
1551 @keyframes slideOutRight {
1552 from {
1553 transform: translate3d(0, 0, 0);
1554 }
1555
1556 to {
1557 visibility: hidden;
1558 transform: translate3d(100%, 0, 0);
1559 }
1560 }
1561
1562 .slideOutRight {
1563 animation-name: slideOutRight;
1564 }
1565
1566 @keyframes slideOutUp {
1567 from {
1568 transform: translate3d(0, 0, 0);
1569 }
1570
1571 to {
1572 visibility: hidden;
1573 transform: translate3d(0, -100%, 0);
1574 }
1575 }
1576
1577 .slideOutUp {
1578 animation-name: slideOutUp;
1579 }
View Code
实例代码:
1 <!DOCTYPE html>2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <link rel="stylesheet" href="../animate.css">
9 <script src="../vue2.4.4.js"></script>
10 </head>
11
12 <body>
13 <!-- 定义一个vue的管理区块，（MVVM中的View） -->
14 <div >
15 <button @click="toggle">显示/隐藏</button><br>
16 <transition
17 enter-active-class="animated fadeInRight"
18 leave-active-class="animated fadeOutRight"
19 >
20 <!-- 坑：span行内元素（行内元素没有宽）
21 应该改为块级元素
22 -->
23 <!-- <span class="show" v-show="isshow">it创业</span> -->
24 <div style="width:200px" class="show" v-show="isshow">it创业</div>
25 </transition>
26 </div>
27 </body>
28
29 <script>
30
31 // 实例化vue对象（MVVM中的View Model）
32 new Vue({
33 // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
34 el:'#app',
35 data:{
36 // 数据 （MVVM中的Model）
37 isshow:false
38 },
39 methods:{
40 toggle:function() {
41 this.isshow = !this.isshow;
42 }
43 }
44 })
45 </script>
46 </html>
三.利用 vue中的钩子函数实现动画
1 <!DOCTYPE html>2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 .show {
11 transition: all 0.5s;
12 }
13 </style>
14 <script src="../vue2.4.4.js"></script>
15 </head>
16
17 <body>
18 <!-- 定义一个vue的管理区块，（MVVM中的View） -->
19 <div >
20 <button @click="toggle">显示/隐藏</button><br>
21 <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
22 <div class="show" v-show="isshow">itcast 传智</div>
23 </transition>
24 </div>
25
26 </body>
27
28 <script>
29 // 实例化vue对象（MVVM中的View Model）
30 new Vue({
31 // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
32 el: '#app',
33 data: {
34 // 数据 （MVVM中的Model）
35 isshow: false
36 },
37 methods: {
38 toggle: function () {
39 this.isshow = !this.isshow;
40 },
41 // 以下三个与enter相关的方法只会在元素由隐藏变为显示的时候才会执行
42 // el:指的是当前调用这个方法的元素对象
43 // done:用来决定是否要执行后续的代码如果不执行这个方法，那么将来执行完before执行完enter以后动画就会停止
44 beforeEnter: function (el) {
45 console.log("beforeEnter");
46 // 当入场之前会执行 v-enter
47 el.style = "padding-left:100px";
48 },
49 enter: function (el, done) {
50 // 当进行的过程中每执行 v-enter-active
51 console.log("enter");
52 // 为了能让代码正常进行，在设置了结束状态后必须调用一下这个元素的
53 // offsetHeight / offsetWeight 只是为了让动画执行
54 el.offsetHeight;
55
56 // 结束的状态最后啊写在enter中
57 el.style = "padding-left:0px";
58
59
60 // 执行done继续向下执行
61 done();
62 },
63 afterEnter: function (el) {
64 // 当执行完毕以后会执行
65 console.log("afterEnter");
66 this.isshow = false;
67 }
68 }
69 })
70
71 </script>
72
73 </html>
四.完成品牌管理案例的vue中的动画完成删除提示
1 <!DOCTYPE html>2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 #app {
11 width: 600px;
12 margin: 10px auto;
13 }
14
15 .tb {
16 border-collapse: collapse;
17 width: 100%;
18 }
19
20 .tb th {
21 background-color: #0094ff;
22 color: white;
23 }
24
25 .tb td,
26 .tb th {
27 padding: 5px;
28 border: 1px solid black;
29 text-align: center;
30 }
31
32 .add {
33 padding: 5px;
34 border: 1px solid black;
35 margin-bottom: 10px;
36 }
37
38 .del li{
39 list-style: none;
40 padding: 10px;
41 }
42
43 .del{
44 position: absolute;
45 top:45%;
46 left: 45%;
47 width: 300px;
48 border: 1px solid rgba(0,0,0,0.2);
49 transition: all 0.5s;
50 }
51 </style>
52 <script src="../vue2.4.4.js"></script>
53 </head>
54
55 <body>
56 <div >
57 <div class="add">
58 编号: <input >
59 <button @click="add">添加</button>
60 </div>
61 <div class="add">品牌名称：<input type="text"></div>
62 <div>
63 <table class="tb">
64 <tr>
65 <th>编号</th>
66 <th>品牌名称</th>
67 <th>创立时间</th>
68 <th>操作</th>
69 </tr>
70 <tr v-if="list.length <= 0">
71 <td colspan="4">没有品牌数据</td>
72 </tr>
73 <!--加入: key="index" 时候必须把所有参数写完整 -->
74 <tr v-for="(item,key,index) in list" :key="index">
75 <td>{{item.id}}</td>
76 <td>{{item.name}}</td>
77 <td>{{item.ctime | dateFrm("/")}}</td>
78 <!-- 使用vue来注册事件时，我们在dom元素中是看不到的 -->
79 <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
80 </tr>
81 </table>
82 </div>
83
84 <transition
85 @before-enter="beforeEnter"
86 @enter="enter"
87 @after-enter ="afterEnter"
88 @before-leave="beforeLeave"
89 @leave="leave"
90 @after-leave ="afterLeave"
91 >
92 <div class="del" v-show="isshow">
93 <ul>
94 <li>您确定要删除当前数据吗</li>
95 <li>
96 <button @click="delById">确定</button>
97 <button @click="showClose">关闭</button>
98 </li>
99 </ul>
100 </div>
101 </transition>
102
103 </div>
104 </body>
105
106 </html>
107
108 <script>
109 // 使用全局过滤器（公有过滤器）
110 Vue.filter("dateFrm", function (time,spliceStr) {
111 // return "2017-11-16";
112 var date = new Date(time);
113 //得到年
114 var year = date.getFullYear();
115 // 得到月
116 var month = date.getMonth() + 1;
117 // 得到日
118 var day = date.getDate();
119 return year + spliceStr + month + spliceStr + day;
120 });
121
122
123 // 先将自定义指令定义好
124 // directive有两个参数
125 //参数一： 自定义指令 v-focus
126 //参数二： 对象，对象中可以添加很多方法
127 // 添加一个inserted方法:而这个方法中又有两个参数：
128 //参数一:el 当前使用自定义指令的对象
129 //参数二：obj 是指它(v-color="color" )后面设置的表达式
130 //{expression:"color",value:"red",}
131 Vue.directive("focus", {
132 inserted: function (el, obj) {
133 // console.log(el);
134 el.focus();
135 }
136 });
137 Vue.directive("color", {
138 inserted: function (el, obj) {
139 // obj.style.color = "red";
140 obj.style.color = obj.value;//????????????
141 console.log(obj.value);
142 }
143 });
144
145 var vm = new Vue({
146 el: "#app",
147 data: {
148 delId:"",// 用来将要删除数据的id进行保存
149 isshow:false,
150 color: "green",
151 id: 0,
152 name: '',
153 list: [
154 { "id": 1, "name": "itcast", "ctime": Date() },
155 { "id": 2, "name": "黑马", "ctime": Date() }
156 ]
157 },
158 // mounted(){
159 // this.getFocus()
160 // },
161 methods: {
162 add: function () {
163 //将id和namepush到list数组中
164 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
165 },
166 del: function (id) {
167 this.isshow = true;
168 // 将得到的id保存到delId里面
169 this.delId = id;
170 },
171 beforeEnter:function(el) {
172 el.style.left = "100%";
173 },
174 enter:function(el,done) {
175 el.offsetHeight;
176 el.style.left = "35%";
177 },
178 afterEnter:function(el){
179
180 },
181 beforeLeave:function(el){
182 el.style.left = "35%";
183 },
184 leave:function(el,done){
185 el.offsetHeight;
186 el.style.left = "100%";
187 setTimeout(function(){
188 done();
189 },500);
190 },
191 afterLeave:function(el){
192
193 },
194 showClose:function(el){
195 this.isshow = false;
196 },
197 delById:function() {
198 _this = this;
199 // 根据DelId删除对应的数据
200 var index = this.list.findIndex(function(item){
201 return item.id ==_this.delId;
202 });
203 this.list.splice(index,1);
204 // 关闭删除框
205 this.isshow = false;
206 }
207 }
208 });
209
210 </script>
以上是 Vue--过渡动画实现的三种方式 的全部内容， 来源链接： utcz.com/z/378932.html
