十七、Vue项目中加入基础动画

我们希望加入一些动画效果。比如图片的渐隐渐现。
在详情页点击顶部banner，图片渐现，点击图片，图片渐隐。

公用组件FadeAnimation.vue

在 src/common 目录下创建 fade 文件夹，并新建FadeAnimation.vue文件

Vue 提供了 transition 的封装组件

在进入/离开的过渡中，会有 6 个 class 切换。
官方文档中有介绍：https://cn.vuejs.org/v2/guide/transitions.html

v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线

<template>
  <transition>
    <!-- 外部组件插进来的插槽 -->
    <slot></slot>
  </transition>
</template>

<script>
export default {
  name: 'FadeAnimation'
}
</script>

<style lang="scss" scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s;
}
</style>

Banner.vue中引入FadeAnimation.vue组件

在Banner.vue中使用fade-animation，用fade-animation对需要渐隐渐现效果的元素进行包裹即可。

<fade-animation>
      <common-gallary
        :imgs="gallaryImgs"
        v-show="showGallay"
        @close="handleGallaryClose"
      ></common-gallary>
    </fade-animation>

其中common-gallary就相当于FadeAnimation.vue中template部分的slot插槽

  //FadeAnimation.vue
  <transition>
    <!-- 外部组件插进来的插槽 -->
    <slot></slot>
  </transition>

这时点击 banner ，明显会看到一个逐渐出现的效果，关闭时也有个渐隐的效果。