vue 动画之展开收起

亲测好用：
https://www.hangge.com/blog/cache/detail_2386.html

 

方法一 . 用css实现 高度已知的 内容区域的展开收起：

<template>
  <transition name="myWrap" class="myWrap">
     <div style="height: 54px;" v-if="show"></div>
  </transition>
</tempalte>


<style>

.myWrap{ transition: all ease .2s; }

.myWrap-enter-active { animation: identifier .2s;    overflow: hidden; }

.myWrap-leave-active { animation: against .2s ; overflow: hidden; }

@keyframes identifier {

  from { height: 0; }

  to { height: 54px; }

}

@keyframes against {

  from { height: 54px; }

  to { height: 0; }

}

</style>

方法二 . 用js 和 velocity-animate实现 多个可计算出高度的 内容区域的展开收起：

<template>
  <div>
    <section v-for="(item, j) in data">
      <p @click="item.show = !item.show">{{ j }}点我</p>
      <transition-group 
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <ul v-if="item.show" :key="j">
          <li v-for="i in item.list" :key="j+'_'+i">{{ i }}</li>
        </ul>
      </transition-group>
    </section>
  </div>
</template>
<script>
import Velocity from 'velocity-animate'

export default {
  name: 'Loading',
  data(){
    return {
      data: [
        {
          show: false,
          list: [
            1,2,3,
          ]
        },
        {
          show: false,
          list: [
            1,2,3,4,5,6
          ]
        },
        {
          show: false,
          list: [
            1,2,3,4,5
          ]
        }
      ]
    }
  },
  methods: {
    beforeEnter: function (el) {
      el.style.height = 0;
    },
    enter: function (el, done) {
      var realHeight = (el.querySelectorAll('li').length * 18) + 'px'
      Velocity(el, { height: realHeight }, { duration: 500 })
    },
    leave: function (el, done) {
      Velocity(el, { height: 0 }, { duration: 500 })
    }
  },
}
</script>
<style>
ul{
  margin-top:0;
  margin-bottom:0;
  overflow: hidden;
}
</style>

 效果已经实现了 列表的展开收起

方法三 . 用js实现 多个可计算出高度的 内容区域的展开收起：

(还有问题：现在只能实现收起的动画，展开的动画未生效)
 

<template>
  <div>
    <section v-for="(item, j) in data">
      <p @click="someItemClicked(j)">{{ j }}点我</p>
      <transition-group 
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <ul v-if="item.show" :key="j">
          <li v-for="i in item.list" :key="j+'_'+i">{{ i }}</li>
        </ul>
      </transition-group>
    </section>
  </div>
</template>
<script>

export default {
  name: 'Loading',
  data(){
    return {
      data: [
        {
          show: true,
          list: [
            1,2,3,
          ]
        },
        {
          show: false,
          list: [
            1,2,3,4,5,6
          ]
        },
        {
          show: false,
          list: [
            1,2,3,4,5
          ]
        }
      ]
    }
  },
  methods: {
    someItemClicked(index){
      for(var i = 0; i < this.data.length; i++){
        this.data[i].show = false;
      }
      this.data[index].show = true;
    },

    beforeEnter: function (el) {
      console.log('beforeEnter')
      el.style.height = 0;
    },
    enter: function (el, done) {
      console.log('enter')
      var realHeight = (el.querySelectorAll('li').length * 18) + 'px'
      el.style.height = realHeight;
    },
    leave: function (el, done) {
      console.log('leave')
      el.style.height = 0;
    }
  },
}
</script>
<style lang="less">
ul{
  margin-top:0;
  margin-bottom:0;
  overflow: hidden;
  transition: all ease 0.5s;
}
</style>