Vuejs Article 7 Vuejs transition animation case comprehensive analysis, vuejs Comprehensive Analysis

Vuejs Article 7 Vuejs transition animation case comprehensive analysis, vuejs Comprehensive Analysis

This document is a more comprehensive and detailed description of the Code in combination with the official documentation.

This document is used in official documents:

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

Next, let's take a look at the transition animation knowledge:

① Definition of transition animation;

Simply put, the module disappears and appears in what form when it disappears or appears;

If you want to use a transition animation, add the attribute to the tag:

Transition = "transition animation name"

For example:

<div class="box" v-if="box_1" transition="mytran">1</div>

Here mytran is the name of the Transition animation, which is a class name. The animation will add multiple different extensions based on this name (For details, refer to the following)

② Events bound to transition Animation:

[1] v-if

[2] v-show

[3] v-for (triggered only during insertion and deletion, you can write it yourself, or use the vue-animated-list plug-in );

For example:

<div v-for="i in items" class="box" transition="mytran">{{i}}</div>

Animation syntax (refer to the following)

[4] dynamic components;

[5] on the Root Node of the component and triggered by the DOM method of the Vue instance (for example, vm. $ appendTo (el )). Add the component to a root node.

③ CSS Animation:

[1] First, you need to have the transition attribute and obtain its value;

[2] Second, CSS requires three class names named by values:

Assume that the value of transition is mytran, the class name is

Description

. Mytran-transition

Animation status. The transition attribute of css is put here, and the class he represents will always exist on the DOM;

In addition, the style here will overwrite the style provided by the default class of the label.

. Mytran-enter

When entering, the component expands from this css state to the current css state. This class only exists at the first frame.

. Mytran-leave

When you exit, the component is restored from the original css status to this status. This class takes effect from the exit and is deleted 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 condition and style when it exists, this style will overwrite the style in class */. mytran-transition {transition: all 0.3 s finished; background-color: greenyellow ;}/*. mytran-enter defines the start status *//*. mytran-leave defines the end state of the exit */. mytran-enter ,. mytran-leave {height: 0; width: 0 ;} </style> <div id = "app"> <button @ click = "change"> click to hide and display randomly </button> <br/> <d Iv class = "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> <script> var vm = new Vue ({el: '# app', data: {box_1: true, box_2: true, box_3: true}, methods: {change: function () {for (var I = 1; I <4; I ++) {this ['box _ '+ I] = Math. random ()> 0.5? True: false ;}}}) setInterval (vm. change, 300); </script>

Click to hide or display three blocks at random;

④ JavaScript HOOK:

[1] In simple terms, this does not affect CSS animation (still the changes of the three classes );

[2] This is mainly used to capture the four moments of entry and exit, and to do some things;

[3] These eight moments are:

Enter: beforeEnter (before entering), enter (before entering the animation), afterEnter (after entering the animation), enterCancelled (interrupted );

Exit: beforeLeave (before exiting), leave (after exiting the animation), afterLeave (after exiting the animation), and leaveCancelled (the exit is interrupted );

[4] DOM modification will be restored in some cases. For example, modifying the textContent attribute of dom in leave will restore the original state when dom enters again; however, if you modify it in the enter step, it will not be restored.

Such as code:

Vue. transition ('mytran ', {beforeEnter: function (el) {// enter the previous 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 ("Exit animation start time:" + new Date (). getTime () ;}, leave: function (el) {$ (el ). text ("leaving... "+ new Date ();}, afterLeave: function (el) {console. log ("Exit End Time:" + new Date (). getTime ());}})

⑤ Custom transition class name:

The reason why we need to customize the transition class name is that we cannot require the style of each css animation to be written in accordance with the Vuejs standard (for example, we download code written by others );

Note: It must be defined before the related Vue instance is declared.

First, we recommend an animated set recommended by the official Vuejs Tutorial: (this is not a download link. You need to open it and find the download link to download it)

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

After downloading the file, import the css file and start the Custom Animation;

<Div id = "app"> <button @ click = "change"> click to hide and display randomly </button> <br/> <div class = "box animated" v- if = "box" transition = "bounce"> 1 </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>

Explanation:

[1] The animation label must have the class "animated;

[2] enterClass and leaveClass are equivalent to the previous xxx-enter and xxx-leave;

[3] The effect is to flash in from the left and flash out from the right.

[4] You must set an animation before declaring a Vue instance. Otherwise, the animation will not work;

6. Use animation

In Vuejs, animation and transition animation are different.

To put it simply, a transition animation can be divided into three steps: Resident class, the class triggered upon entry, and the class triggered upon exit. Only resident classes have the transition animation attribute, and the other two steps only have the css state;

The animation is divided into two steps: the class triggered upon entry and the class triggered upon exit. Of course, the xxx-transition class exists in the dom (this class can be used to set the animation origin, or simply do not set this class );

In an animation, the class at entry and exit must have an animation effect, for example:

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

At the time of entry and exit, the class name and transition executed are in the format of xxx-leave and xxx-enter;

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 1 s both ;} </style> <div id = "app"> <button @ click = "change"> click to hide and display randomly </button> <br/> <div class = "box animated "v-if =" box "transition =" fat "> 1 </div> <script> var vm = new Vue ({el: '# App', data: {box: true}, methods: {change: function () {this. box =! This. box ;}}); </script>

Effect:

Disappear: first increase the width, then restore, and then disappear;

Enter: appears, becomes wide, recovers, and stays;

Here, we share the same animation effect.

7. In addition

[1] explicitly declare the animation type (if the animation has both transition and animation and one of them is executed in different situations );

[2] explanation of the transition process (the sequence of js hook execution and css execution when an animation is triggered );

[3] CSS animation (I .e., animation, which has been written as above, for details );

[4] JavaScript transition (not a js Hook, the hook means that a function is called at a certain stage, but this hook has nothing to do with the animation). It uses JavaScript to control the animation, for example, the animate method of jquery;

[5] progressive transition of v-;

Because it is temporarily unavailable, it is omitted. Open the connection if you need to view it:

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

The above is a comprehensive analysis of the Vuejs transition animation case in article 7 of Vuejs. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!