亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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)文章

最新評(píng)論