在Vue项目加入基础动画

在写网页的过程中，我们希望在网页中加入一些动画效果。比如图片的渐隐渐现。
点击顶部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>

至此，动画效果完成。