vue的动画和过渡

Posted 2021-01-28 bao2333

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
        }
    }
});