本篇我们尝试在项目中加入基础动画。
首先,新建分支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"></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!
提交合并。