vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。
创新互联专注于福海网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供福海营销型网站建设，福海网站制作、福海网页设计、福海网站官网定制、微信小程序开发服务，打造福海网络公司原创品牌,更为您提供福海网站排名全网营销落地服务。
循环列表，html:
在css上加上动画transition
.newslist ul li p {
font-size: 14px;
color: #555;
line-height: 25px;
height: 50px;
overflow: hidden;
transition: height .3s;
}重点是下面js的实现：
分为两种情况：
（一）初始状态是收缩时：
（二）初始状态是展开时：
稍微改动：
var height = liCon.offsetHeight // 也可以是liCon.getBoundingClientRect().height
if (height === this.liConHeight) { // 展开
liCon.style.height = 'auto'
height = liCon.offsetHeight
liCon.style.height = this.liConHeight + 'px'
liCon.style.height = height + 'px'
} else { // 收缩
liCon.style.height = height + 'px'
var f = document.body.offsetHeight
liCon.style.height = this.liConHeight + 'px'
}总结
以上所述是小编给大家介绍的vuejs实现折叠面板展开收缩动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
网站标题：vuejs实现折叠面板展开收缩动画效果
本文URL：
http://cdkjz.cn/article/iggedj.html
