vuejs實現(xiàn)折疊面板展開收縮動畫效果
更新時間：2018年09月06日 11:31:35 作者：yumihe
這篇文章主要介紹了vuejs實現(xiàn)折疊面板展開收縮動畫效果,文中通過代碼給大家分享兩種情況介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
vuejs通過css3實現(xiàn)元素固定高度到auto高度的動畫和auto高度到固定高度的動畫。
循環(huán)列表，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的實現(xiàn)：
分為兩種情況：
（一）初始狀態(tài)是收縮時：
<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>
（二）初始狀態(tài)是展開時：
稍微改動：
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'
}
總結(jié)
以上所述是小編給大家介紹的vuejs實現(xiàn)折疊面板展開收縮動畫效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
在VUE項目中經(jīng)常會用到mapState和mapActions，mapState主要用于同步全局的變量或者對象，這篇文章主要介紹了VUE中的mapState和mapActions的使用,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)動態(tài)路由的相關(guān)知識,主要涉及到兩個方面：一是路由的動態(tài)添加,二是基于路由的參數(shù)變化來動態(tài)渲染組件,下面就跟隨小編一起深入學(xué)習(xí)一下動態(tài)路由的實現(xiàn)吧2024-02-02
本文給大家介紹了vue項目中跨域問題的完美解決方案，通過更改header，使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建），具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧2018-06-06
這篇文章主要介紹了Vue項目打包部署總結(jié)篇,關(guān)于Vue項目發(fā)布的相關(guān)問題就先總結(jié)這么多,幾乎在每一步都踩過坑才有所體會,有問題歡迎各位同學(xué)一起探討,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue中的axios和slot，文中代碼非常詳細(xì)，對大家的工作學(xué)習(xí)有所幫助，感興趣的朋友可以參考下2020-06-06
Nuxt如何實現(xiàn)將服務(wù)測數(shù)據(jù)存儲到Vuex中
這篇文章主要介紹了Nuxt如何實現(xiàn)將服務(wù)測數(shù)據(jù)存儲到Vuex中的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了Element-ui?Dialog對話框基本使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue.js實現(xiàn)開發(fā)購物車功能的方法詳解
這篇文章主要介紹了Vue.js實現(xiàn)開發(fā)購物車功能的方法,結(jié)合實例形式分析了基于vue.js開發(fā)的購物車功能相關(guān)操作步驟與實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法
Vue 3 引入了一個全新的響應(yīng)式系統(tǒng),其中最核心的就是 reactive 和 ref,它們是實現(xiàn)響應(yīng)式數(shù)據(jù)的基礎(chǔ),用于創(chuàng)建可以自動跟蹤變化并更新視圖的對象和變量,本文介紹了Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法,需要的朋友可以參考下2024-08-08
今天小編就為大家分享一篇vue.js單文件組件中非父子組件的傳值實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09