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

这篇文章主要为大家详细介绍了vuejs实现折叠面板展开收缩动画效果，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！

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'

}

总结

以上所述是小编给大家介绍的vuejs实现折叠面板展开收缩动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对512笔记网站的支持！

注：关于vuejs实现折叠面板展开收缩动画效果的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：vue.js