vue动画之点击按钮往上渐渐显示出来的实例(类似与折叠面板)

<!-- 首先将要过渡的元素用transition包裹，并设置过渡的name） -->

 

 <div id="box">

 <transition name="mybox">

  <div class="box" v-show="boxshow"></div>

 </transition>

 <button @click="togglebox">按钮</button>

</div>

  

 <script>

  new Vue({

  el:'#box',

  data:{

   boxshow:false

  },

  methods:{

    

   togglebox:function(){

    this.boxshow = !this.boxshow;

   }

  } 

 });

   

   

 </script>

 

<style>

  .box{

   height:500px;

   

    overflow: hidden;        }

 

//给过渡的name加样式

 

  .mybox-leave-active,.mybox-enter-active{

   transition: all 1s ease;

  }

  .mybox-leave-active,.mybox-enter{

   height:0px !important;

  }

  .mybox-leave,.mybox-enter-active{

   height: 500px;

  }

 </style>