Vue的单元素动画transition

最新推荐文章于 2023-06-14 18:40:24 发布

原创最新推荐文章于 2023-06-14 18:40:24 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

这篇博客展示了如何使用Vue.js和CSS transitions创建一个交互效果，即点击按钮时，一个红色方块会以动画形式从一侧滑出。通过绑定点击事件和条件渲染，结合过渡动画类，实现了0.5秒的滑动消失效果。代码包括Vue实例、HTML结构、CSS样式以及相应的效果图。

功能描述：单击按钮的时候会出现另一个盒子动画滑出

代码如下：

<body>
    <div id="app">
        <button @click="bol=!bol">切换</button>
        <transition name="fade">
            <div class="box" v-if="bol"></div>
        </transition>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                bol: true
            }
        })
    </script>

样式写法如下：

    <style>
        .box {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background-color: red;
            transition: all 1s;         /* 也可以直接在这添加transition*/
        }
        .fade-enter {
            opacity: 0;
            transform: translateX(-300px);
        }
        .fade-leave-to {
            opacity: 0;
            transform: translateX(300px);
        }
        .fade-enter-active,
        .fade-leave-active {
            transition: all 1s;
        }
    </style>

效果图如下：