Vue3学习笔记 怎么实现动画效果？
有时候我们想做一些动画效果。
过渡 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 控制的。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2023-02-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
