（24）详情页开发——⑥ 基础动画组件 | Vue.js 项目实战： 移动端“旅游网站”开发

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

1 需求

当点击详情页的 Banner 后，在 Gallery 出现/隐藏时，有基础的过渡动画效果：

2 基础动画组件

🔗前置知识：

《深入理解 Vue 组件——⑥ 在 Vue 中使用插槽》

《Vue 中的动画特效——① Vue 中的 CSS 动画原理》

《Vue 中的动画特效——⑦ Vue 中的动画封装》

需求分析：实现“点击详情页的 Banner 后，Gallery 出现/隐藏时有过渡动画效果”，只需要给 Gallery 外包裹一层 transition 即可。但这种基础的过渡动画，可能其他组件也会用到，所以我们可以把它单独拆分出来作为一个公用的基础动画组件。

1️⃣在 common 文件夹下新建一个 fade 文件夹：

1️⃣-①：在 fade 文件夹中新建“渐隐渐现动画组件 FadeAnimation.vue ”；

<template>
  <!-- 1️⃣-③：模板中有一个 transition 标签，transition 中包裹了一个插槽 <slot>； -->
  <transition>
    <slot></slot>
  </transition>
</template>

<script>
export default {
  name: 'FadeAnimation' // 1️⃣-②：组件命名为 FadeAnimation；
}
</script>

<style lang="stylus" scoped>
.v-enter, .v-leave-to /* 1️⃣-④：设置 .v-enter 和 .v-leave-to 的 opacity 为 0； */
  opacity: 0

.v-enter-active, .v-leave-active /* 1️⃣-⑤：设置透明度变化的持续时间为 0.5s。 */
  transition: opacity .5s
</style>

2️⃣在 Banner.vue 中使用过渡动画组件 FadeAnimation.vue ：

<template>
  <div>
    <div class="banner" @click="handleBannerClick">
      <img class="banner-img" :src="bannerImg">
      <div class="banner-info">
        <div class="banner-title">{{this.sightName}}</div>
        <div class="banner-number">
          <span class="iconfont banner-icon">&#xe64a;</span>
          {{this.bannerImgs.length}}
        </div>
      </div>
    </div>

    <!-- 2️⃣-③：使用 FadeAnimation 包裹 CommonGallery 组件（即，将 CommonGallery 以插槽的
		形式，插入到 FadeAnimation 组件中）。 -->
    <fade-animation>
      <common-gallery
      	:imgs="bannerImgs"
        v-show="showGallery"
        @close="handleGalleryClose"
      ></common-gallery>
    </fade-animation>
  </div>
</template>

<script>
import CommonGallery from 'common/gallery/Gallery'

import FadeAnimation from 'common/fade/FadeAnimation' // 2️⃣-①：引入 FadeAnimation；

export default {
  name: 'DetailBanner',
  props: {
    sightName: String,
    bannerImg: String,
    bannerImgs: Array
  },
  data () {
    return {
      showGallery: false
    }
  },
  methods: {
    handleBannerClick () {
      this.showGallery = true
    },
    handleGalleryClose () {
      this.showGallery = false
    }
  },
  components: {
    CommonGallery,
    FadeAnimation // 2️⃣-②：注册 FadeAnimation；
  }
}
</script>

<style lang="stylus" scoped>
.banner
  position: relative
  overflow: hidden
  height: 0
  padding-bottom: 55%
  .banner-img
    width: 100%
  .banner-info
    position: absolute
    left: 0
    right: 0
    bottom: 0
    display: flex
    line-height: .6rem
    color: #fff
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8))
    .banner-title
      flex: 1
      padding: 0 .2rem
      font-size: .32rem
    .banner-number
      height: .32rem
      padding: 0 .4rem
      margin-top: .14rem
      font-size: .24rem
      color: #fff
      line-height: .32rem
      border-radius: .2rem
      background: rgba(0, 0, 0, .8)
      .banner-icon
        font-size: .24rem
</style>

保存后，返回页面查看。当点击 Banner 后，Gallery 出现时有了逐渐显现的效果；再点击 Gallery 关闭时，也有了逐渐隐藏的效果：

以上，我们完成了详情页开发。

祝好，qdywxs ♥ you！