在写网页的过程中，我们希望在网页中加入一些动画效果。比如图片的渐隐渐现。
点击顶部banner，图片渐现，点击图片，图片渐隐。
image.png
为此我们写了一个公用组件FadeAnimation.vue
<template>
<transition>
<slot></slot>
</transition>
</template>
<script>
export default{
name: 'FadeAnimation'
}
</script>
<style scoped="">
.v-enter, .v-leave-to{
opacity: 0;
}
.v-leave-active, .v-enter-active{
transition: opacity 0.5s;
}
</style>
在需要渐隐渐现效果的组件Banner.vue中引入FadeAnimation.vue并注册。
<script>
import FadeAnimation from "common/fade/FadeAnimation"
export default{
// 注册引入的局部组件
components:{
FadeAnimation,
},
}
</script>
在Banner.vue中使用<fade-animation>，用<fade-animation>对需要渐隐渐现效果的元素进行包裹即可。
<fade-animation>
<common-gallary
:imgs="gallaryImgs"
v-show="showGallary"
@close="handleGallaryClose"
></common-gallary>
</fade-animation>
其中<common-gallary>就相当于FadeAnimation.vue中<template>部分的<slot>
//FadeAnimation.vue
<template>
<transition>
<slot></slot>
</transition>
</template>
至此，动画效果完成。
