Vue--过渡动画实现的三种方式
Posted QinXiao.Shou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 id="app"> 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 }
实例代码:
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 id="app"> 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 id="app"> 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 id="app"> 57 <div class="add"> 58 编号: <input id="id" v-color="color" v-focus type="text" v-model="id">品牌名称: <input v-model="name" type="text"> 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--过渡动画实现的三种方式的主要内容，如果未能解决你的问题，请参考以下文章
3Vue 笔记（axiosVue 动画Vue 组件使用 this.$refs 来获取元素和组件Vue 组件中 data 和 props 的区别）