Preface
When I go online, I can often see a lot of cool animation effects on apps or web pages, and these effects are quite attractive. So when we write our own projects, we also hope to make some cool animation effects on the page, so that the page will look more distinctive. So I summarized some methods that we can use to achieve animation effects in Vue project development, hoping to help everyone. Below I have used shortcuts to create a vue project, then created different pages and referenced them to show different effects.
Basic implementation of animation
Usually when we implement animation effects, we use the class class in CSS, which is also a relatively basic way to implement animation. First @keyframesdefine an animation, and then use animationattributes to reference the animation in the DOM structure where the animation needs to be implemented. Usually we animationuse four values in the properties, which are the animation name, the time required to complete the animation, the effect of the animation, and the number of animation loops . But in fact, animationthere are many values that can be set, and here we only use these four. @keyframesDefine the entire animation process, from 0% at the beginning to 100% at the end. Other process nodes can also be set in the middle, and different attribute effects can be set on these nodes to achieve animation. This method is also applicable in normal html.
<template>
<div class="box"></div>
</template>
<script>
</script>
<style scoped>
.box{
width: 50px;
height: 50px;
background: rgb(112, 251, 112);
position: relative;
animation: move 2s linear infinite;
}
@keyframes move{
0%{
left:0px;
}
50%{
left:200px;
}
100%{
left: 0px;
}
}
</style>
Vue component-Transition
<Transition>It is a built-in component of Vue, which means that it can be used directly in any other component without registration. It can set the animation of the entry and exit of its internal elements, which is mainly triggered by v-ifand v-show. It can also be <component>triggered by dynamic components switched by special elements, or by changing special key attributes. The principle is the appearance and disappearance of elements. Here I only take it as an v-ifexample . . This method uses the class attribute to control the transition effect of the animation. There are a total of six class attributes used for transition (where v refers to the <Transition>name attribute inside)
- v-enter-from: Enter the starting state of the animation. Added before the element is inserted and removed on the next frame after the element is inserted.
- v-enter-active: Enter the animation's active state. Applies to the entire entry animation stage. Added before the element is inserted and removed after the transition or animation is complete. This class can be used to define the duration, delay and speed curve type of the entry animation.
- v-enter-to: Enter the end state of the animation. It is added the next frame after the element is inserted (i.e. at
v-enter-fromthe same time it is removed), and is removed after the transition or animation is complete. - v-leave-from: Leave the starting state of the animation. Added immediately when the leaving transition effect is triggered, and removed one frame later.
- v-leave-active: Leave the active state of the animation. Applies to the entire leaving animation phase. Added immediately when the leaving transition effect is triggered, removed after the transition or animation completes. This class can be used to define the duration, delay and speed curve type of the exit animation.
- v-leave-to: Leave the end state of the animation. Added the next frame after a leave animation is triggered (that is, at the same time v-leave-from` is removed), and removed after the transition or animation completes.
<template>
<button @click="toggle">click</button>
<Transition name="fade" >
<h1 v-if="showTitle">你好 vue</h1>
</Transition>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
let showTitle = ref(true)
const toggle = () =>{
showTitle.value = !showTitle.value
}
return {
showTitle,
toggle
}
}
}
</script>
<style scoped>
.fade-enter-active,.fade-leave-active{
transition: opacity 1s ease;
}
.fade-enter-from,.fade-leave-to{
opacity: 0;
}
.fade-enter-to,.fade-leave-from{
opacity: 1;
}
/* 以下部分在上面动画基础上添加缩放动画效果 */
/* .fade-enter-active{
animation:bounce 1s ease;
}
.fade-leave-active{
animation:bounce 1s ease reverse;
}
@keyframes bounce{
0%{transform:scale(0);}
50%{transform:scale(1.2);}
100%{transform:scale(1);}
} */
</style>
Transition life cycle function
In addition to using the class attribute to control the transition effect of the animation, <Transition>you can also use the life cycle method to control the animation effect, that is, <Transition>bind its unique events, and the event triggers the corresponding js function to achieve the animation effect, and also controls the animation of the element entering and leaving. . There are six lifecycle functions in total, and they can only be <Transition>used :
1. @before-enter=" " //进入前触发
2. @enter=" " //进入期间触发
3. @after-enter=" " //进入后触发
4. @before-leave=" " //离开前触发
5. @leave=" " //离开期间触发
6. @after-leave=" " //离开后触发
(Since js can set and control many types of animations, there is no detailed animation demonstration here. You can fill in the design yourself)
<template>
<button @click="isShow = !isShow">click</button>
<Transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<h1 v-if="isShow">hello vue</h1>
</Transition>
</template>
<script>
import { ref } from 'vue';
export default {
setup () {
const isShow = ref(true)
const beforeEnter = () =>{
}
const enter = () =>{
}
const afterEnter = () =>{
}
const beforeLeave = () =>{
}
const leave = () =>{
}
const afterLeave = () =>{
}
return {
isShow,
beforeEnter,
enter,
afterEnter,
beforeLeave,
leave,
afterLeave
}
}
}
</script>
<style lang="scss" scoped>
</style>
Use third-party libraries
Through the encapsulated third-party libraries, we can more easily achieve the animation effects we want. Here are two animation libraries animate.css and GSAP recommended for you.
animate.css
Animate.css | A cross-browser library of CSS animations.
This animation library has encapsulated many optional animation effects, which are implemented through CSS. It can be introduced and used through npm or yarn installation. It can also be introduced through import or link, which is more convenient. When using it, you only need to add and the class name of the corresponding animation to the class of the element that needs animation animate__animatedto achieve animation. You can also <Transition>use it in conjunction with others to achieve the effect you want. In conjunction with this <Transition>, directly set the enter-active-class and leave-active-class attribute class names, which represent entering animation and leaving animation respectively.
<template>
<button @click="isShow = !isShow">click</button>
<Transition
enter-active-class="animate__animated animate__bounceInDown"
leave-active-class="animate__animated animate__bounce">
<h1 v-if="isShow">hello vue</h1>
</Transition>
</template>
<script>
import { ref } from 'vue';
export default {
setup () {
const isShow = ref(true)
return {
isShow
}
}
}
</script>
<style lang="scss" scoped>
</style>
GSAP
Different from animate.css, GSAP implements animation through js. The advantage is that some animation effects that come to mind are difficult to achieve with css, but js can complete it better. It can be installed through npm or imported directly from CDN, so that these animations can be used in our projects. Here we talk about the tween animation type, also called tween animation, which is our common animation method of changing between two states. For example, our common uniform speed, slow-in and slow-out animations are Tween-type animations. There are a total of four Tween animation methods:
- gsap.to(): This is the most commonly used tween animation, which is to change the element from the initial state to the target state.
- gsap.from(): It is a bit like the reverse change of the to method, which is to change the element from the target state to the initial state.
- gsap.fromTo(): You need to define the data of two states yourself, and then change from the previous one to the next one.
- gsap.set(): Set directly to the desired state without any transition or animation effects. Essentially it is the .to method with a duration of 0
If we create an animation, the code is: gsap.to(".box", { x: 200 }), the two parameters represent the target and object parameters respectively , which means to move the element with the '.box' class name to the position where x is 200" (just like transform: translateX( 200px)). <Transition>The life cycle function we use here completes an animation:
<template>
<button @click="isShow = !isShow">click</button>
<Transition @enter="enter" @leave="leave">
<h1 v-if="isShow">hello vue</h1>
</Transition>
</template>
<script>
import { ref } from 'vue';
import gsap from 'gsap'
export default {
setup () {
const isShow = ref(true)
const enter = (el,done) =>{
gsap.from(el,{ //el表示目标dom结构，即元素
scale:0, //缩放到0
x:200, // x方向移动200px
onComplete:done //参数done是一个函数，若传入了该参数，就必须调用，表示动画完成，否者看不到动画效果
})
}
const leave = (el,done)=>{
gsap.to(el,{
scale:0,
x:200,
onComplete:done
})
}
return {
isShow,
enter,
leave
}
}
}
</script>
<style lang="scss" scoped>
</style>
Then create an animation effect of digital change loading:
<template>
<input type="number" step="100" v-model="counter">
<h1>{
{ showNumber }}</h1>
</template>
<script>
import { toRefs, watch, reactive } from 'vue';
import gsap from 'gsap'
export default {
setup () {
const state = reactive({
counter:0,
showNumber:0
})
watch( //监听变量的值的变化
() => state.counter,
(newVal) =>{
gsap.to(state,{duration:1,showNumber:newVal}) //duration的值控制动画的事件
}
)
return {
...toRefs(state)
}
}
}
</script>
<style lang="scss" scoped>
</style>
Transition-group
<transition>Only one element can be wrapped in it. It can be used when multiple elements are needed <Transition-group>. Here is a simple animation of multiple elements and data changes:
<template>
<div>
<button @click="addNum">add</button>
<button @click="removeNum">remove</button>
<button @click="shuffleNum">shuffle</button>
</div>
<transition-group name="fade">
<span v-for="item in numbers" :key="item">{
{ item }}</span>
</transition-group>
</template>
<script setup>
import { ref } from 'vue';
import _ from 'lodash' //先npm安装，再引用
const numbers = ref([0,1,2,3,4,5,6,7,8])
const count = ref(10)
const addNum = ()=>{ //在随机位置添加 count
numbers.value.splice(randomIndex(),0,count.value++)
}
const removeNum = () => { //删除随机一个位置的数
numbers.value.splice(randomIndex(),1)
}
const shuffleNum = () => { //借助lodash库，已经封装的打乱数组的方法
numbers.value = _.shuffle(numbers.value)
}
const randomIndex = () =>{ //随机数方法
return Math.floor(Math.random()*numbers.value.length)
}
</script>
<style scoped>
span{
margin-right: 10px;
display: inline-block;
}
.fade-enter-from,.fade-leave-to{
opacity: 0;
transform: translateY(30px);
}
.fade-enter-active,.fade-leave-active{
transition:all 1s ease
}
.fade-leave-active {
position: absolute;
}
/*移动时的动画效果*/
.fade-move {
transition:transform 1s ease;
}
</style>
Summarize
There are many ways to make animations, and many vivid animation effects can attract people's attention. I hope the above animation implementation methods can help everyone, and you can also create more cool effects based on your own imagination.
To learn more about front-end vue development, please pay attention to the CRMEB open source mall . Attachment download: Click here to download