vFade 组件 ``` <template> <div> <transition> <slot name="fade">// 插槽 </slot> </transition> </div> </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> ``` 使用 vFade 组件包裹需要动画的元素，并控制 v-if 实现动画效果 1. 导入并注册组件 vFade 2. 使用 ``` <v-fade> <p slot="fade" v-show="show">渐隐渐现</p> </v-fade>