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實作折疊面闆展開收縮動畫效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對腳本之家網站的支援！