Vue过度动画

最新推荐文章于 2022-12-17 22:23:35 发布

小源同学r

最新推荐文章于 2022-12-17 22:23:35 发布

阅读量140

点赞数 1

分类专栏： Vue.js 文章标签：动画 vue.js css3

本文链接：https://blog.csdn.net/qq_43216714/article/details/123026298

版权

Vue.js 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

本文档详细介绍了如何在Vue中创建一个简单的过渡动画效果。当点击按钮时，一个div元素会通过添加适当的CSS样式和过渡属性显示和隐藏，实现平滑的入场和离场动画。关键CSS类包括`.div-enter`、`.div-leave-to`，用于定义元素的初始和结束状态，而`.div-enter-active`和`.div-leave-active`定义了过渡的持续时间和缓动效果。

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

详细文档 : 【https://cn.vuejs.org/v2/guide/transitions.html】传送门

需求 :

① 当点击按钮时 , 会出现一个过度的动画效果

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue的动画效果</title>
        <script src="lib/vue-2.4.0.js"></script>
        <style>
            /* v-enter 这是个时间点，是进入之前，元素的起始状态，此时还没有进入 */
            /* v-leave-to 这是个时间点，是动画离开之后，元素的终止状态，此时，元素 动画已经结束了 */
            .div-enter,
            .div-leave-to {
                opacity: 0;
                transform: translateX(50px);
            }

            /* v-enter-active 入场动画的时间段 */
            /* v-leave-active 离场动画的时间段 */
            .div-enter-active,
            .div-leave-active {
                transition: all 0.8s ease;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <button @click="flag=!flag">点击</button>
            <transition name="div">
                <div v-show="flag">这是一个div</div>
            </transition>
        </div>

        <script>
            new Vue({
                el: "#app",
                data: {
                    flag: true
                },
                methods: {

                },
                filters: {

                }
            })
        </script>
    </body>

</html>