vue transition 过渡动画

最新推荐文章于 2024-07-04 15:19:20 发布

ruantianqing

最新推荐文章于 2024-07-04 15:19:20 发布

阅读量2k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/ruantianqing/article/details/112602028

版权

本文详细介绍了Vue的transition组件，包括过渡事件、多元素过渡和列表过渡。重点讲解了如何设置过渡名称、监听过渡事件，以及如何实现元素的入场、出场动画。此外，还对比了transition与transition-group的区别和使用场景。

摘要由CSDN通过智能技术生成

transition

vue允许我们在显示隐藏元素以及创建元素过程中，添加过渡效果
transition元素（组件）是由vue提供的，可以为内部的元素添加过渡效果

过程演示

v-enter：过渡的初始状态（隐藏）；在过渡开始前被添加，在过渡开始时会被移除
v-enter-to：过渡的结束状态（显示）；在过渡开始时被添加，在过渡完成时会被移除
v-enter-active：这里包含了上面的v-enter、v-enter-to两个时间段，在这里可以对上半场过渡定义过渡时间、曲线等
v-leave：过渡的初始状态（显示）；在过渡开始前被添加，在过渡开始时会被移除
v-leave-to：过渡的结束状态（隐藏）；在过渡开始时被添加，在过渡完成时会被移除
v-leave-active：这里包含了上面的v-leave、v-leave-to两个时间段，在这里可以对下半场过渡定义过渡时间、曲线等

在这里插入图片描述

通过name属性设置过渡名称，之后就会根据该名称创建六个类
例如name = ‘demo’
表示显示的过程（由隐藏的状态变成显示的状态）
.demo-enter .demo-enter-to .demo-enter-active
表示隐藏的过程（由显示状态变成隐藏的状态）
.demo-leave .demo-leave-to .demo-leave-active
transition组件只是加了这六各类，具体的效果还需要通过css过渡或者动画（借助css3实现的）
入场过渡
我们通过为transition组件添加appear属性，实现入场过渡：当元素加载的时候，执行动画

通过动画效果实现
html

    <div id="app">
        <button @click="toggle">切换</button>
        <!-- 通过name定义名称，这个名字可以自己取 -->
        <transition name="demo">
            <div class="box" v-show="isShow"></div>
        </transition>
    </div>

let app = new Vue({
   
    el: '#app',
    data: {
   
        isShow: true
    },
    methods: {
   
        toggle() {
   
            this.isShow = !this.isShow
        }
    },
})

scss

.box {
   
    width: 200px;
    height: 200px;
    background-color: green;
}

// 定义动画
@keyframes toggle {
   
    // 只有两个状态，可以写0%-100%,也可以写from-to
    from {
   
        width: 200px;
        height: 200px;
        opacity