zoukankan      html  css  js  c++  java

  • 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="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              600px;
 12             margin: 10px auto;
 13         }
 14 
 15         .tb {
 16             border-collapse: collapse;
 17              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          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>
  • 相关阅读:
    Sagit.Framework For IOS 自动布局教程：14、UIScrollView 特殊用法
    Sagit.Framework For IOS 自动布局教程：13、UIImage、UIImageView 图片压缩、（长按）保存、缩放、（列表）放大浏览、生成验证码。
    Sagit.Framework For IOS 自动布局教程：12、UIButton、UILabel、UITextField、UITextView 特殊用法介绍
    Sagit.Framework For IOS 自动布局教程：10、获取px的宽高坐标、元素移动、刷新布局、自适应大小、聊天消息背景图片拉伸。
    Sagit.Framework For IOS 自动布局教程：11、常用宏定义：frame坐标系、获取UI、UI取值、字体颜色、图片
    Sagit.Framework For IOS 自动布局教程：7、底部Tab栏
    Sagit.Framework For IOS 自动布局教程：8、UIView通用事件：点击、双击、长按、拖动、滑动。
    Sagit.Framework For IOS 自动布局教程：9、UI元素的类型转换as
    Sagit.Framework For IOS 自动布局教程：6、导航栏
    Sagit.Framework For IOS 自动布局教程：5、状态栏
  • 原文地址：https://www.cnblogs.com/mrszhou/p/7859020.html
Copyright © 2011-2022 走看看