vue动画

最新推荐文章于 2024-11-22 22:22:08 发布

喝啤酒的猫

最新推荐文章于 2024-11-22 22:22:08 发布

阅读量146

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_38763173/article/details/106245348

版权

vue 专栏收录该内容

14 篇文章

订阅专栏

本文深入讲解Vue.js中过渡动画的实现原理与应用技巧，包括如何使用transition组件配合v-show、v-if指令，以及掌握不同过渡状态下的CSS类名，如v-enter、v-enter-active、v-enter-to等，实现丰富的动画效果。

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

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
vue过渡动画会和 v-show , v-if 相结合使用
必须使用 transition 组件将需要过渡动画的元素包裹起来

当元素从显示状态 --> 隐藏状态我们称为leave状态 vue会给目标元素加上3个class
v-leave: 当前这个class vue本身是没有使用的!
v-leave-active : 他在整个vue过渡的生命周期中都会有效
v-leave-to : 他只有在vue过渡动画的最后一帧才会起作用

当元素从隐藏状态–> 显示状态我们称为enter状态 vue会给目标元素加上3个class
v-enter: 当前这个class会在vue过渡动画的第一帧起作用
v-enter-active : 他在整个vue过渡的生命周期中都会有效
v-enter-to : 他只有在vue过渡动画的最后一帧才会起作用

<div id="app">
    <button @click="flag = !flag">click me</button>
    <transition>
        <div id="test" v-show="flag">
            {{msg}}
        </div>
    </transition>
</div>

v-enter{opacity: 0 !important;background: gray !important;}
v-enter-active{transition: 1s all}
v-enter-to{opacity: 1 !important;background: pink !important;}

v-leave{}
v-leave-active{transition: 1s all}
v-leave-to{opacity: 0 !important;background: gray !important;}