Vue3学习笔记 怎么实现动画效果?
分类:vue
有时候我们想做一些动画效果。
过渡 transition
css的属性transition 可以实现动画过渡效果。
示例:点击按钮,让div的宽度变长。
<template>
<div class="box" :style="{width:width+'px'}"></div>
<button @click="change">click</button>
</template>
<script setup>
import {ref} from 'vue'
let width= ref(100)
function change(){
width.value += 100
}
</script>
<style>
.box{
background:red;
height:100px;
transition: width 1s linear;
}
</style>

从图中可以看到,我们通过transition 将值可以缓慢的变成另一个值,从而实现一种过渡的效果。
动画 animation和keyframe
也可以用 animation和keyframe的组合实现动画效果。示例:让方块来回在 0 - 50% - 100% 区间反复移动,持续时间:2s,线性变化。
.box1{
width:30px;
height:30px;
position: relative;
background:#d88986;
animation: move 2s linear infinite;
}
@keyframes move {
0% {left:0px}
50% {left:200px}
100% {left:0}
}

这就是简单的动画了。
Vue3中的动画
Vue 3 中提供了一些动画的封装,使用内置的 transition 组件来控制组件的动画。
示例:点击按钮 让文字 显示/隐藏。
<template>
<button @click="toggle">click</button>
<h1 v-if="showTitle">你好 Vue 3</h1>
</template>
<script setup>
import {ref} from 'vue'
let showTitle = ref(true)
function toggle(){
showTitle.value = !showTitle.value
}
</script>
现在看着虽然可以完成 显示和隐藏的功能,但是很生硬。按照前面的思路想丝滑一些,可以加入transition进行过渡。我们看下Vue3里是如何加过渡的。
<template>
<button @click="toggle">click</button>
<transition name="fade">
<h1 v-if="showTitle">你好 Vue 3</h1>
</transition>
</template>
<script setup lang="ts">
import {ref} from 'vue'
let showTitle = ref(true)
function toggle(){
showTitle.value = !showTitle.value
}
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s linear;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

我们需要做下面两点,就可以实现渐隐渐现的效果了。
- 用transition标签把 想要过渡的部分夹住的同时,把name设为fade。
- 设置以fade开头的一组动画样式。
这四个样式官网的图比较好理解:

- v-enter-from里的v就是我们上面设置的name 值为fade。
- 这里在进入 和 离开的时候 是由 fade-enter-active 和 fade-leave-active 控制的。
- 进入的开始和结束,是由fade-enter-from和fade-enter-to 控制的。
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu