Element-UI中内置动效小记

1、前言

为了避免页面各种组件进出太直白，我们常常会给组件加上动效。在element中，为我们提供了内置动画效果：

<transition name="el-fade-in">
  <div v-show="show" class="transition-box">.el-fade-in</div>
</transition>

我们只需要控制显隐即可控制显示特效，非常方便。

2、问题

但是，默认动画效果有时候太快或者太慢，不符合我们的预期，如何调整？
以渐隐为例：

<!-- 动画效果：淡入淡出，渐进时间1200毫秒，渐出时间300毫秒 -->
<transition :duration="{enter:1200,leave:300}" name="fade">
</transition>

tansition标签允许传入一个数组，赋值给duration，enter为渐进，就是从无到有的时间，leave则是渐出，就是从有到无