vue-06-over and animations

1, CSS over and animation

Need to use V-if, v-show to do

1), Over-class name

V-enter: triggers when entering

V-enter-active: During the execution

V-enter-to: On Stop

V-leave: At the beginning of the departure

V-leave:active: When leaving execution

V-leave-to: When the departure is stopped

<div>      <p> animation over </p><br/>      <button @click ="showhide" > button </button>      <transition name="fade">        <p v-show="  show"> led painting over hidden areas </p>      </transition>      <p v-show="  show"> Over-hidden areas with no animations </p>    </div>

data () {      return {                true,true,true,              }    },    methods: {      showhide () {        =!  This.show      },

Need to add CSS styles

. fade-enter-active,. fade-leave-active{    transition:opacity 2s;  }  . Fade-enter,. fade-leave-to{    0  }  . Fade-enter-to,. fade- Leave {    1;  }

2), CSS Animation

<!--animations-    <div>      <button @click ="showhideadm"> Animation Toggle </ button>      <transition name="ami">        <p v-show="  Showadm"> Hehe </p>      </transition>    </div>

Showhideadm () {        =!  This.showadm      },

  /*Animation*/. Ami-enter-Active {animation:bounce-inch. 5s ease; }  /*use in reverse rotation painting*/. Ami-leave-Active {animation:bounce-inch. 5s Reverse; }  /*Enter Animation*/@keyframes Bounce-inch {    0%{Transform:scale (0); }     -%{Transform:scale (1.5); }     -%{Transform:scale (1); }  }  /*!* leave animation *!*/  /*@keyframes bounce-out {*/    /*0% {*/      /*Transform:scale (0);*/    /*}*/    /*50% {*/      /*Transform:scale (1.5);*/    /*}*/    /*100% {*/      /*Transform:scale (1);*/    /*}*/  /*}*/

3, using a third-party animation library

Introducing third-party CSS

Introduced in the index.html

<!--introducing third party Css--><link href="https://cdn.jsdelivr.net/npm/[email protected]" Rel= "stylesheet " type="text/css" >

<!--use a third-party library to bring CSS in index--<div> <button @click ="Animlib"> Animation Library </button> <Transition name="custom-classes-transition"Enter-active-class="animated Flipinx"Leave-active-class="animated Flipoutx"> <p Vif="Anim"> third-party animation library use </p> </transition> </div>

Animlib () {        =!  This.anim      }

vue-06-over and animations