昨天越来越多，明天越来越少。走过的路长了，遇见的人多了，不经意间发现，人生最曼妙的风景是内心的淡定与从容，头脑的睿智与清醒。
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。
循环列表，html:
<template>
<div class="newslist">
<ul>
<li v-for="(item,index) in newslist" :key="index">
<p class="p" ref="liCon">{{item.content}}</p>
<div class="open" @click="open(item,index)">
<div v-if="!item.openFlag">【展开】</div>
<div v-else>【收缩】</div>
</div>
</li>
</ul>
</div>
</template>
在css上加上动画transition
.newslist ul li p {
font-size: 14px;
color: #555;
line-height: 25px;
height: 50px;
overflow: hidden;
transition: height .3s;
}
重点是下面js的实现：
分为两种情况：
（一）初始状态是收缩时：
<script type="text/ecmascript-6">
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)
}
}
}
}
</script>
（二）初始状态是展开时：
稍微改动：
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实现折叠面板展开收缩动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
到此这篇关于vuejavascript如何实现折叠面板展开收缩动画效果就介绍到这了。内心强大比什么都重要你要照顾好自己；承认自己的平凡，但是努力向好的方向发展；可以平静面对生活，安然的听从自己内心的感受，不受其他影响，你可以，请不要虚度。更多相关vuejavascript如何实现折叠面板展开收缩动画效果内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
