vue的动画和过渡

最新推荐文章于 2025-08-12 14:37:12 发布

weixin_30715523

最新推荐文章于 2025-08-12 14:37:12 发布

阅读量61

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bao2333/p/10133695.html

本文介绍了一个使用Vue.js实现的动画切换效果案例。通过定义CSS过渡动画，当元素显示或隐藏时，将应用从左侧滑入或右侧滑出的动画。同时，通过Vue实例中的toggle方法控制元素的显示与隐藏状态，实现了动画的交互效果。

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

toggle

动画内容

.fade-enter-active, .fade-leave-active {
  transition: all .5s;
}

/*.fade-enter, .fade-leave-to {
  opacity: 0;
}*/
.fade-enter{
    transform: translate(-100px,0);
}

.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    transform: translate(500px,0);
}

const vm = new Vue({
    el: '#app',
    data:{
        isShow: true
    },
    methods:{
        toggle(){
            this.isShow = !this.isShow
        }
    }
});

转载于:https://www.cnblogs.com/bao2333/p/10133695.html