vue伸缩效果_vuejs实现折叠面板展开收缩动画效果

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 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

如您喜欢交流学习经验，点击链接加入交流1群：1065694478(已满)交流2群：163560250