vue里类似手风琴效果的样式问题

Question

想在vue里实现一个手风琴 折叠面板的效果 我现在 写的只能很生硬的显示出来 完成没有那种动画效果
我该怎么给transition添加样式才能有这种效果呢

     <a @click="toggle">
         平台信息
        <img src="~assets/images/information/icon_more.png" height="9" 
         width="9" 
        alt="">
    </a>
    <transition>
      <div class="platformInfo" v-show="showMenue">
       <router-link to="basic">
         基本信息
       </router-link>
       <router-link to="organization" >
         治理信息
       </router-link>
       <router-link to="webInfo">
         网站信息
       </router-link>
       <router-link to="report">
         专项报告
       </router-link>
       <router-link to="bigEvent">
         重大事项
       </router-link>
      </div>
    </transition>
    <router-link to="operation">
      运营信息
    </router-link>
    <router-link to="safe">
      安全保障
    </router-link>
    <router-link to="bankInfo">
      银行存管
    </router-link>

Answer 1

为什么不用框架呢？iview 或者 element-ui

如果要自己实现，可以使用css3的animation