在子组件
```
<template>
<transition>
<slot name="fade"></slot>
</transition>
</template>
<script>
export default {
name:"VFade"
}
</script>
<style lang="scss" scoped>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
```
父组件
1.先引用import
2.在components:{}中注册子组件
3.哪里要用就套在哪个的外面,然后在用的那里添加**slot="fade"**,如下代码:
```
<v-fade>
<detail-gallary slot="fade" v-show="isGallary" @toggle="hide" :gallaryImgs="gallaryImgs"></detail-gallary>
</v-fade>
```