The JS transition of the Vue transition effect

Previous words

Unlike CSS transitions, JS transitions are triggered primarily by events. This article will detail the JS transition of the Vue transition effect

Event Hooks

JS transition mainly through event monitoring event hooks to trigger the transition, including the following event hooks

<transition  v-on:before-enter= "Beforeenter"  v-on:enter= "enter"  v-on:after-enter= "Afterenter"  v-on:enter-cancelled= "entercancelled"  v-on:before-leave= "Beforeleave"  v-on:leave= "Leave"  v-on : after-leave= "Afterleave"  v-on:leave-cancelled= "leavecancelled" >  <!--...--></transition >

In each of the following methods, the parameter El in the function represents the element to be transitioned, and the position, color, etc. of the El can be set under different circumstances to control its animation changes.

Methods: {  //--------//  Enter in  //--------  beforeenter:function (EL) {    //...  },  // This callback function is optional setting  //When combined with CSS using  enter:function (el, done) {    //...    Done ()  },  afterenter:function (EL) {    //...  },  entercancelled:function (EL) {    //... c17/>},  //--------  //Leave  //--------  beforeleave:function (EL) {    //...  },  // This callback function is optional setting  //When combined with CSS using  leave:function (el, done) {    //...    Done ()  },  afterleave:function (EL) {    //...  },  //leavecancelled only for V-show  Leavecancelled:function (EL) {    //...  }}

In the above method, there are two methods that are special, are the Enter () and leave () methods, and they accept the second parameter done. When finished or left, the done () method is called to do the following

[note] For elements that use only JS transitions v-bind:css="false" , Vue skips the detection of CSS. This also avoids the effect of CSS during the transition

"Simple Case"

Here is a simple example of a JS transition

<div id= "Demo" >  <button @click = "show =!show" >Toggle</button>  <transition v-on: Before-enter= "Beforeenter" v-on:enter= "enter" v-on:leave= "Leave": css= "false" >    <p v-if= "Show" >demo </p>  </transition></div>

<script>new Vue ({  el: ' #demo ',  data: {    show:false  },  methods: {    beforeenter:function (EL) {      el.style.opacity = 0      el.style.transformOrigin = ' left '    },    enter:function (el, done) {      Velocity (el, {opacity:1, fontSize: ' 1.4em '}, {duration:300})      velocity (el, {fontSize: ' 1em '}, {Complete:done })    },    leave:function (el, done) {      Velocity (el, {translateX: ' 15px ', Rotatez: ' 50deg '}, {duration:600 )      Velocity (el, {rotatez: ' 100deg '}, {loop:2})      velocity (el, {rotatez: ' 45deg ', Translatey: ' 30px ', translate X: ' 30px ', opacity:0}, {Complete:done})}}  )  </script>

Initial render Transitions

You can appear set the transition of the node in the initial rendering through the attributes, customize the JavaScript hooks

<transition  appear  v-on:before-appear= "Custombeforeappearhook"  v-on:appear= "Customappearhook"  v-on:after-appear= "Customafterappearhook"  v-on:appear-cancelled= "Customappearcancelledhook" >  <!--...--></transition>

Here is an example

<div id= "Demo" >  <button @click = "reset" > Restore </button>  <transition appear  : appear= " Customappearhook ">    <p> Blue Ideal for small matches </p>  </transition></div>

<script>new Vue ({  el: ' #demo ',  methods:{    Reset () {      history.go ();    },     Customappearhook (el, done) {      Velocity (el, {backgroundcolor: "#ddd", translatex:200});      Velocity (el, "reverse", {Complete:done})    },   </script>

The JS transition of the Vue transition effect