【Vue3】第十六部分 transition

最新推荐文章于 2025-05-08 22:02:04 发布

Tree_wws

最新推荐文章于 2025-05-08 22:02:04 发布

阅读量832

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Trees__/article/details/126919371

前端框架Vue 专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了Vue3中transition组件的使用方法，包括基本用法、配合animate.css使用、Appear属性的应用、transitionGroup的多种场景实践等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【Vue3】第十六部分 transition

16. transition

16.1 transition的基本使用(name属性)

在这里插入图片描述

<script lang="ts" setup>
    import {ref} from 'vue'
    const flag = ref<boolean>(true)
</script>

<template>
    <div>
        <button @click="flag = !flag">切换</button>
        <transition name="fade">
            <h1 v-if="flag">大家好!</h1>
        </transition>
    </div>
</template>

<style scoped lang='less'>
    // 根据所取的名字,会提供6个类
    .fade-enter-from{
        // 进入时的过渡前
        opacity: 0;
    }
    .fade-enter-active{
        // 进入时的过渡中
        transition: all 1s ease;
    }
    .fade-enter-to{
        // 进入时的过渡结束
        opacity: 1;
    }
    .fade-leave-from{
        // 离开时的过渡前
        opacity: 1;
    }
    .fade-leave-active{
        // 离开时的过渡中
        transition: all 1s ease;
    }
    .fade-leave-to{
        // 离开时的过渡结束
        opacity: 0;
    }
</style>

16.2 transition+animate.css使用

在这里插入图片描述

安装animate.css

$ npm install animate.css --save
$ yarn add animate.css

<script lang="ts" setup>
    import {ref} from 'vue'
		// 引入样式
    import 'animate.css';
    const flag = ref<boolean>(true)
</script>

<template>
    <div>
        <button @click="flag = !flag">切换</button>
        <!-- 直接使用这两个属性,因为开头和结尾都只有一帧而已 -->
        <transition enter-active-class="animate__animated animate__bounceInDown" leave-active-class="animate__animated animate__fadeOutDown">
            <h1 v-if="flag">大家好!</h1>
        </transition>
    </div>
</template>

16.3 transition中Appear属性

这个属性可以在页面加载完后立即执行对应的状态,也就是立即执行动画过渡效果

<script lang="ts" setup>
    import {ref} from 'vue'
    import 'animate.css';
    const flag = ref<boolean>(true)
</script>

<template>
    <div>
        <!-- 页面加载完后立即执行-->
        <transition appear appear-active-class="animate__animated animate__bounceInDown">
            <h1 v-if="flag">大家好!</h1>
        </transition>
    </div>
</template>

16.4 transitionGroup

16.4.1 配合animate使用

在这里插入图片描述

用于同时渲染整个列表,例如:使用v-for的时候

<script lang="ts" setup>
    import {ref} from 'vue'
    import "animate.css"
    const list = ref<number[]>([1,2,3])
    const add = () =>{
        list.value.push(list.value.length + 1)
    }
    const del = () =>{
        list.value.pop()
    }
</script>

<template>
    <div>
        <div class="wrapper">
            <transition-group enter-active-class="animate__animated animate__lightSpeedInRight" leave-active-class="animate__animated animate__rotateOutDownLeft">
                <div class="item" v-for="item in list" :key="item">{{item}}</div>
            </transition-group>
        </div>
        <button @click="add">add</button>
        <button @click="del">del</button>
    </div>
</template>

<style scoped lang='less'>
    .wrapper{
        display: flex;
        .item{
            margin: 5px;
        }
    }
</style>

16.4.2 平移过渡动画

在这里插入图片描述

$ npm i -g npm
$ npm i --save lodash

<script lang="ts" setup>
import _ from 'lodash';
import { ref } from 'vue';
let list = ref(Array.apply(null, { length: 81 } as number[]).map((_, index) => {
    return {
        id: index,
        num: index % 9 + 1
    }
}))
const handleRandom = () =>{
    list.value = _.shuffle(list.value)
}
</script>

<template>
    <div>
        <button @click="handleRandom">随机排序</button>
        <div class="wrapper">
            <!-- move-class:平移变化 -->
            <transition-group move-class="move">
                <div class="item" v-for="item in list" :key="item.id">{{item.num}}</div>
            </transition-group>
        </div>
    </div>
</template>

<style scoped lang='less'>
    .wrapper{
        display: flex;
        flex-wrap: wrap;
        width: calc(40px*9 + 9px);
        border-left:1px solid black ;
        border-top:1px solid black ;
        .item{
            border: 1px solid black;
            padding: 5px;
            width: 30px;
            line-height: 30px;
            text-align: center;
            border-left: none;
            border-top: none ;
        }
    }
    .move{
        transition: all 1s;
    }
</style>

16.4.3 状态过渡

在这里插入图片描述

npm install gsap

<script lang="ts" setup>
    import {reactive, ref, watch} from 'vue'
    import gsap from "gsap";
    import "animate.css"
    const num = reactive({
        current:0,
        newVal:0
    })

    // 监视当前的值是否发生变化
    watch(()=>num.current,(newVal,oldVal) =>{
        // 使用这个gasp去过渡,它可以接收一个对象
        gsap.to(num,{
            newVal:newVal,
            // 持续时间
            duration:3,
            // 过渡曲线
            ease:"espo.out"
        })
    })
</script>

<template>
    <div>
        <div>
            <input type="number" v-model="num.current" step="30">
            <transition-group>
                <h2>{{num.newVal.toFixed()}}</h2>
            </transition-group>
        </div>
    </div>
</template>

<style scoped lang='less'>
</style>