动画钩子函数

@before-enter="beforeEnter"
@enter='enter'
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave='leave'
@after-leave="afterLeave"

相对应在methods中有6个方法

                beforeEnter(el) {
                    // 动画进入之前的回调
                    el.style.transform = "translateX(500px)";
                },
                enter(el,done){
                    el.offsetHeight;
                    el.style.transform = "translateX(0px)";
                    console.log(done());
                    done()
                },
                afterEnter(el) {
                    // 动画进入完成之后的回调
                    // this.isshow = !this.isshow;
                    el.style.color = "red"
                },
                beforeLeave(el) {
                    // 动画离开之前的回调
                    el.style.transform = "translateX(0px)";
                },
                leave(el, done) {
                    el.offsetHeight;
                    el.style.transform = "translateX(500px)";
                    console.log(done());
                    done()
                },
                afterLeave(el) {
                    // 动画离开完成之后的回调
                },
            },

 

posted @ 2021-09-28 22:42  从入门到入土  阅读(86)  评论(0)    收藏  举报