Vue动画钩子函数写入离开函数

最新推荐文章于 2024-09-28 20:39:29 发布

没有bug的小史

最新推荐文章于 2024-09-28 20:39:29 发布

阅读量78

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/djsknsns/article/details/127780954

版权

这个示例展示了如何使用 Vue.js 和 Vue Router 搭配 CSS 过渡效果来创建一个按钮点击后显示/隐藏带有动画的 'OK' 文本。通过在不同动画阶段调用回调函数，实现了元素进入和离开时的平移和颜色变化效果。

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .show {
            transition: all 0.4s ease;
        }
    </style>
</head>

<body>
    <div id='app'>
        <input type="button" value="切换动画" @click="isshow = !isshow">
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave"
            @leave="leave" @after-leave="afterLeave">
            <div v-if="isshow" class="show">OK</div>
            <!-- <div>oK</div> -->
        </transition>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                isshow: true
            },
            methods: {
                beforeEnter(el) {    //动画进入之前的回调
                    el.style.transform = 'translateX(500px)';
                    el.style.color = 'red'

                },
                enter(el, done) { // 动画进入完成时候的回调
                    // console.log(done);
                    // 必须要写的
                    el.offsetWidth;
                    el.style.transform = 'translateX(0px)';
                    // 已经完成
                    // done();
                },
                afterEnter(el) { // 动画进入完成之后的回调
                    // this.isshow = !this.isshow;
                },
                beforeLeave(el) {
                    // console.log(el);
                    el.style.color = 'black'

                    el.style.transform = 'translateY(300px)'

                },
                leave(el, done) {
                    // console.log(done);
                    // 必须要写的
                    el.offsetWidth;
                    el.style.transform = 'translateX(0px)';
                    // 已经完成
                    // done();
                },
                afterLeave(el) {
                    // this.isshow = !this.isshow

                },
            }
        })
    </script>
</body>

</html>