Vue学习：Vue中CSS动画原理_vue chunk-ui.css-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43912883/article/details/102921595

本文介绍了在Vue中如何使用transition标签实现CSS动画，通过解析Vue如何处理动画流程，详细阐述了显示和隐藏时的动画过程，并提供了基础代码示例。

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

Vue学习：Vue中CSS动画原理

一、例子

1.1 基础代码

代码实现了点击按钮hello derrick显示或者消失，现在需要添加过度效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello Derrick</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div id="root">
                <div v-if="show">hello derrick</div>
                <button @click="handleClick">切换</button>
            </div>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                show:true
            },
            methods:{
                handleClick:function(){
                    this.show = !this.show
                }
            }
        })
    </script>
</html>

1.2 transition标签

transition标签里面包裹说明里面包裹的内容有动画效果，当有标签被transition标签包裹后，Vue会分析标签CSS样式，构建动画流程：

1.2.1 显示的动画流程

开始：动画即将开始执行瞬间添加这两个fade-enter、fade-enter-active的class名字
过程：删除fade-enter、添加fade-enter-to的class名字
最后：删除fade-enter-active、fade-enter-to这两个class名字

在这里插入图片描述

1.2.2 隐藏的动画流程

在这里插入图片描述

1.2.3 代码

        <style>
            .v-enter{
                opacity: 0;
            }
            .v-enter-active{
                transition: opacity 3s;
            }
            .v-leave-to{
                opacity: 0;
            }
            .v-leave-active{
                transition: opacity 3s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div id="root">
                <transition name="fade">
                    <!--也可以写动态组件-->
                    <div v-if="show">hello derrick</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                show:true
            },
            methods:{
                handleClick:function(){
                    this.show = !this.show
                }
            }
        })
    </script>