本文介绍了如何在Vue.js中封装一个简单的动画组件，实现元素的淡入淡出效果。通过`handleBeforeEnter`、`handleEnter`、`handleLeave`方法设置CSS过渡，并在`handleAfterLeave`中处理动画结束后的操作。通过点击事件切换显示状态，实现了组件的动态显示和隐藏，是Vue.js初学者理解组件动画的一个基础案例。
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;
}
}
});
试了好久，还是无法搞出来，请老师或同学们指点。谢谢。
扫一扫
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
