渐隐渐现的动画效果可能在多个地方都会用的到,所以将其编写成一个公共类
1、建公共类
2、编写动画效果的vue组件
实现动画效果,其实是将组件包裹在transition标签中,然后将需要用到的动画通过插槽的进行插入
<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>
3、编写使用组件
使用组件只需要将公共动画组件引入,然后用动画组件包裹需要用到动画的组件,这样便可以实现动画效果了
<fade-animation>
<common-gallary :imgs="bannerImgs" v-show="showGallary" @close="handleGallyClose"></common-gallary>
</fade-animation>
<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-animation>
<common-gallary :imgs="bannerImgs" v-show="showGallary" @close="handleGallyClose"></common-gallary>
</fade-animation>
</div>
</template>
<script>
import CommonGallary from 'common/gallary/Gallary'
import FadeAnimation from 'common/fade/FadeAnimation'
export default {
name: 'Detail',
props: {
sightName: String,
bannerImg: String,
bannerImgs: Array
},
data () {
return {
showGallary: false
}
},
methods: {
handleBannerClick () {
this.showGallary = true
},
handleGallyClose () {
this.showGallary = false
}
},
components: {
CommonGallary,
FadeAnimation
}
}
</script>
<style lang="stylus" scoped>
.banner
position relative
overflow hidden
height 0
padding-bottom 55%
.banner-img
width 100%
.banner-info
display flex
position absolute
left 0
right 0
bottom 0
line-height .6rem
color #fff
// 渐变色
background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
.banner-title
flex 1
font-size .32rem
padding 0 .2rem
.banner-number
margin-top .14rem
padding 0 .4rem
line-height .32rem
height .32rem
border-radius .2rem
background rgba(0, 0, 0, .8)
font-size .24rem
.banner-icon
font-size .24rem
</style>