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.offsetHeight

if (height === this.liConHeight) { // 展开

liCon.style.height = 'auto'

height = liCon.offsetHeight

liCon.style.height = this.liConHeight + 'px'

var f = document.body.offsetHeight // 必加

liCon.style.height = height + 'px'

} else { // 收缩

liCon.style.height = this.liConHeight + 'px'

}

if (!item.openFlag) {

Vue.set(item, 'openFlag', true)

} else {

Vue.set(item, 'openFlag', false)

}

}

}

}

(二)初始状态是展开时：

稍微改动：

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'

}