平武建站

vuejs实现折叠面板展开收缩动画效果

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实现折叠面板展开收缩动画效果
文章出自：http://pwwzsj.com/article/iggedj.html

其他资讯