vue 一个简单的项目 之三 详情页面 step7 在项目中加入基础动画

本篇我们尝试在项目中加入基础动画。

首先，新建分支detail-animation, pull下来，在新分支上写代码。

我们要做的效果是，公共画廊组件打开关闭时渐隐渐现。

首先，在src/common 下新建一个文件夹 fade。在fade 下，建一个Fade.vue 组件。

直接写一下 Fade.vue 如下。

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

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

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

下面，在Banner.vue 中使用 Fade.vue

Banner.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">&#xe632;</span>
          {{this.bannerImgs.length}}
        </div>
      </div>
    </div>
    <fade>
      <common-gallary
        :imgs="bannerImgs"
        v-show="showGallary"
        @close="handleGalleryClose"
      ></common-gallary>
    </fade>
  </div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
import Fade from 'common/fade/Fade'
export default {
  name: 'DetailBanner',
  props: {
    sightName: String,
    bannerImg: String,
    bannerImgs: Array
  },
  data () {
    return {
      showGallary: false
    }
  },
  components: {
    CommonGallary,
    Fade
  },
  methods: {
    handleBannerClick () {
      this.showGallary = true
    },
    handleGalleryClose () {
      this.showGallary = false
    }
  }
}
</script>

Done! 

提交合并。