使用 vue3 写一个自动获取宽度高度变化的过渡动画可以这样做:
- 在组件中定义一个布尔型的变量来控制过渡动画的开始和结束,例如:
data() {
return {
animate: false
}
}
- 在组件中定义一个计算属性来自动获取元素的宽度和高度,例如:
computed: {
elementSize() {
const el = this.$refs.element
return {
width: el.offsetWidth,
height: el.offsetHeight
}
}
}
- 在模板中使用过渡组件来控制元素的宽度和高度变化时的动画效果,例如:
<