快捷導(dǎo)航

vuejs實(shí)現(xiàn)折疊面板展開收縮動(dòng)畫效果

更新時(shí)間：2018年09月06日 11:31:35 作者：yumihe

這篇文章主要介紹了vuejs實(shí)現(xiàn)折疊面板展開收縮動(dòng)畫效果,文中通過代碼給大家分享兩種情況介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

vuejs通過css3實(shí)現(xiàn)元素固定高度到auto高度的動(dòng)畫和auto高度到固定高度的動(dòng)畫。

循環(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上加上動(dòng)畫transition

 .newslist ul li p {
  font-size: 14px;
  color: #555;
  line-height: 25px;
  height: 50px;
  overflow: hidden;
  transition: height .3s;
 }

重點(diǎn)是下面js的實(shí)現(xiàn)：

分為兩種情況：

（一）初始狀態(tài)是收縮時(shí)：

<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)是展開時(shí)：

稍微改動(dòng)：

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實(shí)現(xiàn)折疊面板展開收縮動(dòng)畫效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

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