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
<transitionV-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) { //... c18/>}, //-------- //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
<DivID= "Demo"> <Button@click= "show =!show">Toggle</Button> <transitionV-on:before-enter= "Beforeenter"V-on:enter= "Enter"V-on:leave= "Leave": css= "false"> <Pv-if= "Show">Demo</P> </transition></Div>
<Script>NewVue ({el:'#demo', data: {show:false}, methods: {beforeenter:function(EL) {el.style.opacity= 0El.style.transformOrigin= ' Left'}, enter:function(el, done) {Velocity (EL, {opacity:1, FontSize:'1.4em'}, {duration: -}) Velocity (el, {fontSize:'1em'}, {Complete:done})}, leave:function(el, done) {Velocity (el, {translateX:'15px', Rotatez:'50deg'}, {duration: -}) Velocity (el, {rotatez:'100deg'}, {loop:2}) Velocity (el, {rotatez:'45deg', Translatey:'30px', TranslateX:'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
<DivID= "Demo"> <Button@click= "Reset">Restores</Button> <transitionAppear:appear= "Customappearhook"> <P>The blue ideal of the little match</P> </transition></Div>
<Script>NewVue ({el:'#demo', methods:{Reset () {history.go (); }, Customappearhook (el, done) {Velocity (el, {backgroundcolor:"#ddd", TranslateX: $}); Velocity (EL,"Reverse", {complete:done})},}})</Script>
The JS transition of the Vue transition effect