无法设置html过渡效果,如何用JS代码封装来实现transition过渡效果（渐隐无法实现？）...

Vue中的动画封装

hello world

hello world

toggle

Vue.component('fade', {

props: ['show'],

template: `

`,

methods: {

handleBeforeEnter(el) {

el.style.opacity = 0;

},

handleEnter(el, done) {

setTimeout(() => {

el.style.transition = 'opacity 2s';

el.style.opacity = 1;

done();

}, 0);

},

handleLeave(el, done) {

setTimeout(() => {

el.style.transition = 'opacity 2s';

el.style.opacity = 0;

done();

}, 0);

},

handleAfterLeave(el) {

console.log('after leave');

}

}

});

var vm = new Vue({

el: '#app',

data: {

show: false

},

methods: {

handleClick() {

this.show = !this.show;

}

}

});

试了好久，还是无法搞出来，请老师或同学们指点。谢谢。