vue之动画( 仿jquery的slideToggle动画效果 )

Vue提供了transition组件，写法：

<transition name="box"></transition>

---

在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

2. v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
5. v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用 <transition name="box"> 可以重置前缀，比如v-enter 替换为 box-enter。

---

例子：( 仿jquery的slideToggle动画效果 )

效果展示：

代码展示：

<template>
    <div id="app">
        <button v-on:click="show = !show">
            slideToggle
        </button>
        <transition name="ul">
            <ul v-if="show" class="ul-box">
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>11111111111111</li>
            </ul>
        </transition>
    </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>

<style>
.ul-box {
  height: 300px;
  overflow: hidden;
}
.ul-enter-active,
.ul-leave-active {
  transition: all 0.5s;
}
.ul-enter,
.ul-leave-to {
  height: 0;
}
</style>