Vue2.5 旅游项目实例24 详情页-在项目中添加基础动画

创建分支：detail-animation

拉去到本地并切换分支：

git pull
git checkout detail-animation

在详情页点击banner，显示画廊轮播组件的时候，添加渐隐渐显的动画效果。

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

<template>
  <transition>
    <slot></slot>
  </transition>
</template>

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

<style lang="stylus" scoped>
.v-enter, .v-leave-to
  opacity: 0
.v-enter-active, .v-leave-active
  transition: opacity .5s
</style>

打开detail目录下的Banner.vue文件，引用：

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

<script>
import CommonGallary from 'common/gallary/Gallary'
import FadeAnimation from 'common/fade/FadeAnimation'
export default {
  name: 'DetailBanner',
  components: {
    CommonGallary,
    FadeAnimation
  },
}
</script>

fade-animation 组件做一个包裹，common-gallary 组件做一个插槽的形式，插入到 fade-animation 这个组件里，里面的 slot 代表的就是 common-gallary ，然后在 common-gallary 外部加了一个动画效果。所以当 common-gallary 组件进行展示或者隐藏的时候，会有一个渐隐渐显的动画效果。

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

提交代码：

git add .
git commit -m "banner渐隐渐显动画效果"
git push

git checkout master
git merge detail-animation
git push