This article is a more comprehensive and detailed explanation compiled by the editor in combination with official documents, with more and more complete codes.
This article comes from the official document:
http://cn.vuejs.org/guide/transitions.html
Let’s take a look at the relevant knowledge of transition animation:
① Definition of transition animation;
Simply put, it is what form it will disappear and appear when the module disappears and appears;
If you want to use transition animation, add attributes to the tag:
transition=”Transition animation name”
For example:
<div v-if="box_1" transition="mytran">1</div>
Here is mytran, which is the transition animation name. It is a class name. The animation will add multiple different extensions based on this name (see below for details)
② Transition animation binding events:
【1】v-if
【2】v-show
【3】v-for (only triggered when inserting and deleting, you can write it yourself, or use the vue-animated-list plug-in);
Write for yourself for example:
<div v-for="i in items" transition="mytran">{{i}}</div>A brief animation writing method (see below)
【4】Dynamic components;
[5] On the root node of the component, and is triggered by the Vue instance DOM method (for example: vm.$appendTo(el)). Probably, add the component to a root node.
③CSS animation:
[1] First, you need to have the transition attribute and then get its value;
【2】Secondly, there are three class names in CSS with values, namely:
Assuming the value of transition is mytran, the class name is
illustrate
.mytran-transition
In animation state, css' transition attribute is placed here, and the class it represents will always exist on the DOM;
In addition, the style here will override 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, and this class only has the first frame.
.mytran-leave
When exiting, the component restores to this state from the original css state. This class takes effect from the beginning of exit and is deleted at the end of exit.
As code:
<style> .box { width: 100px; height: 100px; border: 1px solid red; display: inline-block; } /* This defines the animation situation and the style when it exists. This style will override the style in the class*/ .mytran-transition { transition: all 0.3s ease; background-color: greenyellow; } /* .mytran-enter defines the start 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 to hide and show randomly</button> <br/> <div v-if="box_1" transition="mytran">1</div> <div v-if="box_2" transition="mytran">2</div> <div 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 (var i = 1; i < 4; i++) { this['box_' + i] = Math.random() > 0.5 ? true : false; } } } }) setInterval(vm.change, 300); </script>Clicking will randomly make 3 blocks hide or display;
④JavaScript hook:
[1] Simply put, this does not affect CSS animation (still changes in those three categories);
[2] This is mainly used to grab entry and departure four moments each, and is used to do certain things;
【3】These eight moments are:
Enter: beforeEnter (before enter), enter (before enter the animation just starts), afterEnter (before enter the animation ends), enterCancelled (before enter is interrupted);
Exit: beforeLeave (before exit), leave (the exit animation just started), afterLeave (the exit animation ended), leaveCancelled (the exit is interrupted);
[4] Modification of DOM will be restored in some cases. For example, modifying the textContent property of dom in the leave step will restore the original state when the dom re-enter; but if modified in the enter step, it will not be restored.
As code:
Vue.transition('mytran', { beforeEnter: function (el) { //Before Enter 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("Leave..." + new Date()); }, afterLeave: function (el) { console.log("Leave end time:" + new Date().getTime()); } })⑤Custom transition class name:
The reason for customizing the transition class name is that we cannot require that the style of each css animation is written according to the Vuejs standard writing method (such as we download code written by others);
Note: Definition needs to be made before declaring the relevant Vue instance.
First of all, I recommend a collection of animations recommended by the official Vuejs tutorial: (This is not a download link, you need to open it to find the download link before you can download it)
https://daneden.github.io/animate.css/
After downloading, import this css file and start customizing the animation;
<div id="app"> <button @click="change">Click to hide and show randomly</button> <br/> <div 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】Animal tags are required to have the animated class;
【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 need to set an animation before declaring the Vue instance, otherwise it will be invalid;
⑥Use animations
In Vuejs, animation animation and transition animation are different.
Simply put, transition animation is divided into three steps: permanent class, class triggered when entering, and class triggered when exiting; only permanent class has transition animation attributes, and the other two steps only have css state;
Animation animation is divided into two steps: the class triggered when entering and the class triggered when exiting. Of course, the xxx-transition class exists in the dom (this class can be used to set the animation origin, or simply not set this class);
In animation animation, the class classes when entering and exiting should have animation effects, for example:
@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 names executed are the same as transitions, and are in the formats of xxx-leave and xxx-enter;
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 to hide and display randomly</button> <br/> <div 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: Be wider first, then recover, then disappear;
Enter: appear, widen, recover, stay;
Here I am lazy and share the same animation effect.
⑦In addition to this, there is
[1] Explicitly declare the animation type (if the animation has transition and animation at the same time, and one of them will be executed in different situations);
[2] Detailed explanation of the transition process (the order of js hook execution and css execution when the animation is triggered);
[3] CSS animation (that is, animation, as written above, omitted in details);
[4] JavaScript transition (not a js hook, a hook means that a certain function will be called at a certain stage, but this hook has nothing to do with animation), and use JavaScript to control animation, such as jquery's animate method;
【5】A gradual transition used by v-for;
Since it is not available for the time being, it is omitted. If you need to view it, please open the connection:
http://cn.vuejs.org/guide/transitions.html
The above is a comprehensive analysis of the Vuejs transition animation case of the seventh Vuejs introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!