vue 展开收起（高度不固定，还要有平滑的过渡效果）

原创

已于 2024-02-01 09:17:59 修改 · 7.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2021-02-04 16:12:41 首次发布

本文介绍两种实现Vue折叠面板动画的方法：一是通过自定义过渡动画配合Velocity.js实现平滑的展开与收起效果；二是利用Element UI提供的折叠过渡组件简化开发过程。

找了好多案例都不是很顺滑，最终还是功夫不负有心人，找到了一个非常棒的案例，只是简单地尝试一下，以后使用可以在进行全面的封装来公共使用

方法一：

<template>
  <div class="panelMain">
    <div class="panel">
      <!-- body -->
      <transition
        name="panel-fade"
        @enter="enter"
        @before-leave="beforeLeave"
        @leave="leave"
      >
        <div class="panel__body" v-show="ifShowBody" ref="panel__body_height">
          <slot>
               <div class="box"></div>
          </slot>
        </div>
      </transition>
      <!-- footer -->
      <div class="panel__footer" @click="iconClick">{
  
  {ifShowBody? '收起': '更多'}}</div>
    </div>
    <slot name="main">
        <div class="main" ref="main"></div>
    </slot>
  </div>
&l