Animation effect
- Use v-bind to add different class names to elements. These class names are animations written in advance to achieve animation effects
- Use transition tags to wrap the tags that need to be animated
- The child elements in transition need to have v-show or v-if to control whether to display
- The name attribute in the transition tag determines which animation effect is used
example
- First define the animation effect
.fade-enter-active {
transition: all ease 2s;
}
.fade-enter {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
.fade-leave-active {
transition: all ease 2s;
}
.fade-leave {
opacity: 1;
}
.fade-leave-to {
opacity: 0;
}
- This is Vue's regulations, the format must be like this
- Animation effect name -enter-active
- Animation effect name-enter
- Animation effect name -enter-to
<div id="app">
<h1>动画</h1>
<button @click='flag=!flag'>切换</button></button>
<br />
<transition name='fade'>
<img src="./下载.jpg" width="160" v-if='flag'>
</transition>
</div>
const app = new Vue({
el: "#app",
data: {
flag: {
flag: true }
},
})
- Click the button to display the animation effect
- Take a look at the page effect
Animation class name
Class name-enter:
- Define the starting state for entering the transition. It takes effect when the element is inserted and is removed in the next frame.
Class name-enter-active:
- Define the end state of the transition. It takes effect when the element is inserted, and is removed after the transition/animation is completed.
Class name-leave:
- Define the starting state of the departure transition. It takes effect when the exit transition is triggered and is removed in the next frame.
类名-leave-active:
- Define the end state of the exit transition. It takes effect when the exit transition is triggered, and is removed after the transition/animation is completed.
Entry process
- Class name-enter-active
- -enter-to
- -enter
The process of leaving
- 类名-leave-active
- -leave-to
- -leave
Effects when moving
- -move
After knowing the principle of animation, the large list of CSS effects above can be written in the form of frame animation
@keyframes fadeIn {
from {
opacity: 0; }
to {
opacity: 1; }
}
@keyframes fadeout {
from {
opacity: 1; }
to {
opacity: 0; }
}
.fade-enter-active {
animation: fadeIn ease 2s;
}
.fade-leave-active {
animation: fadeOut ease 2s
}
Multiple element transition
- In fact, v-if and v-else are added to the tags inside
- Let the internal labels achieve mutual exclusion effect, realize the effect of one label appearing and the other label disappearing (also can only be mutual exclusion effect)
- It is impossible to realize that all child elements appear and disappear at the same time
<div id="app">
<transition name="fade">
<h1 v-if="isShow">哈哈哈哈</h1>
<h1 v-else>呵呵呵</h1>
</transition>
<button @click='isShow=!isShow'>按钮</button>
</div>
- At this time, due to the existence of the diff algorithm, the animation did not appear, because when the label was replaced, it was found that the two labels did not change, that is, the dom did not change at all, and vue did not recreate a new dom, so there was no animation. effect
- When elements with the same tag name are switched, you need to set a unique value through the key feature to mark them so that Vue can distinguish them, otherwise Vue will only replace the content inside the same tag for efficiency.
Component transition
- Actually wrap the component tag with the transition tag
<transition name="动画效果名">
<component is="组件名"></compoment>
</transiton>
List transition
- transition-group Different fromtransition, It will be presented as a real element: a span by default.
- It can be replaced with other elements through the tag feature.
- A different key value must be added to the child element
<transition-group tag='ul' name="动画效果名">
<li v-for='(item,index) in 数据' key='index'>{
{item}}</li>
</transition-group>
- In doing so, when the disappearing animation effect is run, it will always be deleted from the last one
- Because the diff algorithm thinks that the lesser is always the last one, that is, the key value should not be set to a number
Use animation plugins
- First introduce plugins, such as animate
<link rel="stylesheet" href="./animate.min.css">
- Use plugin
<transition enter-active-class='rollIn animated' leave-active-class='hinge animated'>
<img src="./下载.jpg" width="160" v-if='flag'>
</transition>
- View effect
