# fade 淡入淡出

> fade是一个淡入淡出组件

[demo](demo/components/fade.html ':ignore')

## 使用方法

```
<fade appear :speed="500">
    <template slot-scope="slot">
        <div v-if="show" :class="slot.className" :style="slot.styleObj">
            Now you see me
        </div>
        <section v-else :class="slot.className" :style="slot.styleObj">
            Now you don't
        </section>
    </template>
</fade>

```

```
import {Fade} from 'vivo-ui';

export default {
    components: {
        Fade
    }
};
```

## 属性

名称|类型|必填|默认值|描述
:-:|:-:|:-:|:-:|:-:
speed|`Number`&#124;` String`|`N`|`normal`|淡入淡出速度，单位ms，0表示无淡入淡出效果；String类型只支持`fast`,`normal`,`slow`三个值
appear|`Boolean`|`N`|`false`|初始渲染时是否淡入
mode|`String`|`N`|`-`|控制离开/进入的过渡时间序列，有效的模式有`out-in`和`in-out`，默认同时生效。

## 插槽

名称|必填|说明
:-:|:-:|:-:
默认|`Y`|内容区域


## 注意

**过渡的元素上必须要应用插槽的类和样式，否则过渡无法生效，如下**

```
<div v-show="show" :class="slot.className" :style="slot.styleObj">Now you see me</div>
```