1. Basic implementation of animation
Transition built-in component implementation [single element or single component]
1.1. Add animation to a single element
1.2. Adding animation to a single component is the same as 1.1, just wrap it with transition
1.3. The following situations can add entry and exit transitions to any element and component:
- conditional rendering
- dynamic component
- Component root node
1.4. The interview may ask about animation principles:
1.5. Commonly used 6 class names , transition does not define name, the default is v-beginning, if name is defined, it is name-beginning
1.6. Schematic diagram of animation [execution principle]
2, animation animation
3. Set transition and animation at the same time
You need to set the type attribute to let vue decide whether the animation will end based on transition or animation [Who takes a long time to write who]
Generally defined animations are as long as the transition time
Or just use animation to define the animation of two frames, and then don't use transition too much
:duration The specified animation time displayed [duration can define two data types]
Numer type: set the transition time of entering and leaving at the same time
Object type: set the transition time of entering and leaving respectively
4. Transition mode mode [used more]
in-out Enter first, then leave, and then leave after entering
out-in Leave first before entering, and enter after leaving
5. Add animation effect when initial display
6. Combining third-party libraries to realize animation animate.css [css animation library]
animate.css is very useful for emphasis, home page, sliding attention guide
6.1 Using animate.css
Installation: npm install animate.css
Introduction: import 'animate.css' in main.js
Use: write animation name into css or add to transition class
7. gsap third-party library js animation library
The css animation library is relatively inflexible, and it is more convenient to fix the value, but if the value changes, you can use the js library
7.1 Steps to use
Installation: npm install gsap
Import: import gsap from 'gsap' in the used components
Use the corresponding api : generally use the enter and leave hooks with the js hooks provided by the transition
7.2. Understand the js hook provided by the transition component, which can help us monitor which stage the animation is executing
Here is the comparison table:
Complete writing:
8. jsap realizes digital change effects [common animation effects]
9. transition-group [rendering list]
You need to use why-move to set a displacement animation for other nodes that need to be moved. The specific displacement is determined by vue
10. gasp case
<template>
<div>
<input type="text" v-model = "msg">
<transition-group
tag = "ul"
@before-enter = "beforeEnter"
@enter = "enter"
@Leave = "leave"
:css = "false">
<li
v-for = "(item,index) in showList"
:key = "index"
:data-index = "index"
>{
{item}}</li>
</transition-group>
</div>
</template>
<script>
import gsap from "gsap"
export default {
computed:{
showList(){
return this.list.filter(item=>{
return item.indexOf(this.msg) != -1;
})
}
},
data(){
return {
msg:"",
list:["abc","wshia","bxixi","hah","dfd"]
}
},
methods:{
beforeEnter(el){
el.style.opacity = 0;
el.style.height = 0;
},
enter(el,done){
console.log(el.dataset,el.dataset.index)
gsap.to(el,{
opacity:1,
height:"1.5rem",
onComplete:done,
delay:0.05 * el.dataset.index,
duration:1
})
},
leave(el,done){
gsap.to(el,{
opacity:0,
height:0,
duration:1,
onComplete:done,
delay:0.05 * el.dataset.index,//小技巧：el.dataset可以获取到上面元素里绑定的属性
})
}
}
}
</script>
<style scoped>
</style>