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 }
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 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>

 

posted @ 2017-11-19 08:49  QinXiao.Shou  阅读(47694)  评论(0)  编辑  收藏  举报