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>

我们需要做下面两点,就可以实现渐隐渐现的效果了。

1. 用transition标签把 想要过渡的部分夹住的同时，把name设为fade。
2. 设置以fade开头的一组动画样式。

这四个样式官网的图比较好理解：

• v-enter-from里的v就是我们上面设置的name 值为fade。
• 这里在进入 和 离开的时候 是由 fade-enter-active 和 fade-leave-active 控制的。
• 进入的开始和结束，是由fade-enter-from和fade-enter-to 控制的。