运动插件
<template>
<transition>
<slot></slot>
</transition>
</template>
<script>
export default {
name: 'Fade'
}
</script>
<style scoped lang="stylus">
.v-enter, .v-leave-to
opacity 0
.v-enter-active, .v-leave-active
transition opacity .5s
</style>
使用该插件的页面
<template>
<div>
<detail-banner :sightName="sightName" :bannerImg="bannerImg" :imgLen="imgLen" @show="showImgEvent"/>
<detail-header v-if="!showImg"/>
<!-- 使用运动效果 -->
<fade-animation>
<common-gallary v-if="showImg" :imgs="imgs" @show="showImgEvent"/>
</fade-animation>
<div class="container" v-if="!showImg">
<detail-list :list="list"/>
</div>
</div>
</template>
<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailList from './components/List'
import CommonGallary from 'common/gallary/Gallary'
// 引入运动组件
import FadeAnimation from 'common/fade/Fade'
import axios from 'axios'
export default {
name: 'Detail',
components: {
DetailBanner,
DetailHeader,
CommonGallary,
DetailList,
FadeAnimation
},
data () {
return {
showImg: false,
imgs: [ ],
list: [ ],
bannerImg: '',
sightName: '',
imgLen: 0
}
},
methods: {
showImgEvent (status) {
this.showImg = status
},
getDetailInfo () {
axios.get('/api/detail.json', {
params: {
id: this.$route.params.id
}
}).then(this.getDetailInfoSucc)
},
getDetailInfoSucc (res) {
res = res.data
if (res.ret && res.data) {
const data = res.data
this.imgs = data.gallaryImgs
this.list = data.categoryList
this.bannerImg = data.bannerImg
this.sightName = data.sightName
this.imgLen = data.gallaryImgs.length
}
}
},
mounted () {
this.getDetailInfo()
}
}
</script>
<style lang="stylus" scoped>
.container
height 2000px
</style>