vue收缩面板_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的实现：

分为两种情况：

(一)初始状态是收缩时：

import Vue from 'vue'

export default {

props: ['newslist'],

data() {

return {

liConHeight: 50 // 两行文字的高度

}

},

methods: {

open(item, i) {

const liCon = this.$refs.liCon[i]

var height = liCon.offset