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