Vuejs Seventh Vuejs Transition Animation case comprehensive analysis _javascript skills

This article is a small series combined with the official document collation of a more comprehensive and detailed instructions, more complete code.

This information is available in the Official document:

Http://cn.vuejs.org/guide/transitions.html

Below look at the transition animation related knowledge:

Definition of ① transition animation;

In short, it is when the module disappears, appear, what form will disappear and appear;

If you want to use a transition animation, add the properties to the label:

transition= "Transition Animation name"

For example:

<div class= "box" v-if= "Box_1" transition= "Mytran" >1</div>

Here is Mytran is the transition animation name, he is a class name, the animation will be based on this name and add a number of different extensions (see below for details)

② a transition Animation-bound event:

"1" v-if

"2" v-show

"3" v-for (only trigger when inserting and deleting, can write by oneself, or use vue-animated-list plug-in);

Write yourself for example:

<div v-for= "I in Items" class= "box" transition= "Mytran" >{{i}}</div>

The animation is written slightly (refer to the following)

"4" Dynamic components;

"5" is on the root node of the component and is triggered by the Vue instance Dom method (for example, VM. $appendTo (EL)). Presumably, add a component to a root node.

③css Animation:

"1" first, you need to have the transition attribute, and then get its value;

"2" second, CSS needs to have a value in the name of the three class names, respectively:

Assuming the value of transition is Mytran, the class is named

Description

. mytran-transition

Animation state, the transition property of the CSS is placed here, and the class that he represents always exists on the DOM;

In addition, the style here overrides the style provided by the default class of the label

. mytran-enter

When entered, the component extends from this CSS state to the current CSS state, and this class only has the first frame

. mytran-leave

When exiting, the component reverts to this state from its original CSS state, which takes effect from the beginning of the exit and deletes at the end of the exit.

such as code:

<style> box {width:100px; 
height:100px; 
border:1px solid red; 
Display:inline-block; 
}/* This defines the animation situation, as well as the existence of the style, this style will cover the class style * * * mytran-transition {transition:all 0.3s ease; 
Background-color:greenyellow; 
/*. mytran-enter defines the starting state of entry////*. Mytran-leave defines the end state of departure/* Mytran-enter,. mytran-leave {height:0; 
width:0; } </style> <div id= "app" > <button @click = "Change" > Click Random Hide and show </button> <br/> <div clas s= "box" v-if= "Box_1" transition= "Mytran" >1</div> <div class= "box" v-if= "Box_2" transition= "Mytran" >2 </div> <div class= "box" v-if= "Box_3" transition= "Mytran" >3</div> </div> <script> var vm = new Vue ({el: ' #app ', data: {box_1:true, box_2:true, Box_3:true}, methods: {change:function () {for (VA R i = 1; I < 4; 
i++) {this[' box_ ' + i] = Math.random () > 0.5? true:false; 
}}}) SetInterval (Vm.change, 300); </script>

Click will randomly let 3 squares hide or display;

④javascript Hook:

"1" In simple terms, this does not affect the CSS animation (still the change of the three classes);

"2" This is mainly used to crawl into and out of each of the four moments, used to do certain things;

The eight moments of "3" were:

Enter: Beforeenter (enter before), enter (enter animation just started), Afterenter (enter animation end), entercancelled (enter to be interrupted);

Exit: Beforeleave (before exiting), leave (exit animation just started), Afterleave (exit animation end), leavecancelled (exit interrupted);

"4" Changes to the DOM are partially restored, such as modifying the Textcontent property of the Dom in leave, which will revert to the original when the DOM is re-enter, but will not be restored if you modify this step.

such as code:

Vue.transition (' Mytran ', { 
beforeenter:function (EL) {//before entering 
console.log ("Enter animation start time:" + new Date (). GetTime ()) ; 
}, 
enter:function (EL) { 
el.textcontent = new Date (); 
}, 
afterenter:function (EL) { 
Console.log ("Enter end time:" + new Date (). GetTime ()) 
, 
beforeleave:function (EL) { 
console.log ("Leave animation start time:" + new Date (). GetTime ()) 
, 
leave:function (EL) { 
$ (EL). Text ("Away from ..." + new Date ()); 
Afterleave:function (EL) { 
console.log ("Departure End time:" + new Date (). GetTime ()); 
} 
)

⑤ Custom Transition class name:

The reason we want to customize the transition class name is because we cannot ask for the style of each CSS animation to be written according to the VUEJS standard (for example, we download code written by others);

Note: You need to define the relevant Vue instance before declaring it.

First, recommend a VUEJS official tutorial recommended animation set: (This is not a download link, you need to open it to find the download link to download)

https://daneden.github.io/animate.css/

After downloading, import the CSS file, and then start customizing the animation;

<div id= "App" > 
<button @click = "Change" > Click Random Hide and show </button> 
<br/> 
<div class = "box animated" v-if= "box" transition= "Bounce" >1</div> 
</div> 
<script> 
Vue.transition ("Bounce", { 
enterclass: ' Bounceinleft ', 
leaveclass: ' Bounceoutright ' 
}) 
var vm = new Vue ({ 
el: ' #app ', 
data: { 
box:true 
}, 
methods: { 
change:function () { 
This.box =! This.box 
}} 
); 
</script>

Explain:

"1" to animate the label, need to have animated this class;

"2" Enterclass and Leaveclass equivalent to the previous xxx-enter and Xxx-leave;

The "3" effect is to flash in from the left and flash out of the right.

"4" requires an animation to be set before declaring the Vue instance, otherwise it will not work;

⑥ Use animation animation

In Vuejs, animation animations and transition animations are different.

In short, the transition animation is divided into three steps: The resident class, the class triggered when it is entered, the class that fires when exiting, and only the resident class has transition animation properties, the other two steps are only CSS state;

The animation animation is divided into two steps: the class that fires when it is entered, the class that fires when it exits. And, of course, there are xxx-transition this class exists in the DOM (this class can be used to set the animation origin, or simply not set the Class);

In animation animations, class classes that enter and exit should have animated effects, such as:

@keyframes Fat { 
0% { 
width:100px 
} 
50% { 
width:200px 
} 
100% { 
width:100px 
} 
} 
. Fat-leave,. fat-enter { 
animation:fat 1s both; 
}

When entering and exiting, the class name executed is the same as the transition, Xxx-leave and xxx-enter in this format;

Of course, you can also customize the class name.

Sample code:

<style> 
Box { 
width:100px; 
height:100px; 
border:1px solid red; 
Display:inline-block; 
} 
@keyframes Fat { 
0% { 
width:100px 
} 
50% { 
width:200px 
} 
100% { 
width:100px 
} 
} 
. Fat-leave,. fat-enter { 
animation:fat 1s both; 
} 
</style> 
<div id= "app" > 
<button @click = "Change" > Click Random Hide and show </button> 
<br /> 
<div class= "box animated" v-if= "box" transition= "fat" >1</div> 
</div> 
< Script> 
var vm = new Vue ({ 
el: ' #app ', 
data: { 
box:true 
}, 
methods: {Change 
: function () { 
this.box =!this.box; 
} 
} 
); 
</script>

Effect:

Disappear: First widen, then restore, then disappear;

To enter: appear, widen, resume, stay;

Here lazy shared the same animation effect.

⑦ Besides, there are

"1" explicitly declares the type of animation (if the animation has transition and animation at the same time, and performs one of them in a separate case);

"2" transition process to explain (trigger animation, JS Hook to perform with the Order of CSS);

"3" CSS animation (that is, animation, like the above has been written, specific slightly);

"4" javascript transitions (not a JS hook, a hook is a call to a function at a certain stage, but this hook is not animated), using JavaScript to control animation, such as jquery animate method;

"5" v-for use of the gradual transition;

Because temporarily does not use, therefore skips, needs to see opens the connection:

Http://cn.vuejs.org/guide/transitions.html

The above is a small set to introduce the Vuejs seventh Vuejs Transition Animation Case comprehensive analysis, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!