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

这篇文章主要介绍了vuejs实现折叠面板展开收缩动画效果,文中通过代码给大家分享两种情况介绍的非常详细,具有一定的参考借…

这篇文章主要介绍了vuejs实现折叠面板展开收缩动画效果,文中通过代码给大家分享两种情况介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。

循环列表,html:

 
    
     
     
 
  • {{item.content}}

    【展开】 【收缩】

在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实现折叠面板展开收缩动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对www.cfluntan.cn网站的支持!

以上就是vuejs实现折叠面板展开收缩动画效果的详细内容,更多请关注www.cfluntan.cn其它相关文章!

为您推荐

返回顶部