vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。
循环列表，html:
【收缩】
在css上加上动画transition
重点是下面js的实现：
分为两种情况：
（一）初始状态是收缩时：
文字的高度
}
},methods: {
open(item,i) {
const liCon = this.$refs.liCon[i]
var height = liCon.offsetHeight
if (height === this.liConHeight) { // 展开
liCon.style.height = 'auto'
height = liCon.offsetHeight
liCon.style.height = this.liConHeight + 'px'
var f = document.body.offsetHeight // 必加
liCon.style.height = height + 'px'
} else { // 收缩
liCon.style.height = this.liConHeight + 'px'
}
if (!item.openFlag) {
Vue.set(item,'openFlag',true)
} else {
Vue.set(item,false)
}
}
}
}
（二）初始状态是展开时：
稍微改动：
总结
以上所述是小编给大家介绍的vuejs实现折叠面板展开收缩动画效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/30405.html