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'
}