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().heightif (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實現折疊面板展開收縮動畫效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！