为什么fade组件在banner.vue写没有动画效果,在gallary.vue才有效果?
来源:9-8 Vue项目详情页 - 在项目中加入基础动画
qq_上帝之手_3
2019-05-29
- Fade.vue
<transition>
<slot></slot>
</transition>
</template>
<script>
export default {
name: 'FadeAnimation'
}
</script>
<style lang="stylus" scoped>
.v-enter, .v-leave-to
opacity: 0
.v-enter-active, .v-leave-active
transition: opacity .5s
</style>
- Banner.vue
<template>
<div>
<div class="banner" @click="handleGallaryClick">
<img :src="bannerImg" alt="" class="banner-img">
<div class="banner-info">
<div class="banner-title">{{this.$store.state.sightName}}</div>
<div class="banner-number">
<span class="icon iconfont banner-icon"></span>
{{gallaryImgs.length}}
</div>
</div>
</div>
<common-gallary
:gallaryImgs="gallaryImgs"
@close="handleGallaryClose" :showGallary="showGallary"
@show="handleGallaryShow"
></common-gallary>
</div>
</template>
<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
name: 'DetailBanner',
components: {
CommonGallary,
},
props: {
gallaryImgs: Array,
bannerImg: String
},
data() {
return {
showGallary: false
}
},
methods: {
handleGallaryClick() {
this.showGallary = true
},
handleGallaryClose() {
this.showGallary = false
},
handleGallaryShow() {
this.showGallary = true
}
}
}
</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
.banner-number
padding: 0 .4rem
margin-top: .14rem
height: .32rem
line-height: .32rem
background: rgba(0,0,0,0.8)
border-radius: .2rem
font-size: .24rem
.banner-icon
font-size: .24rem
</style>
- Gallary.vue
<template>
<fade-animation>
<div class="container" @click="handleGallaryClose" v-show="showGallary">
<div class="wrapper" @click.stop>
<swiper :options="swiperOption">
<swiper-slide v-for="(item,index) of gallaryImgs" :key="index">
<img :src="item" alt="" srcset="" class="gallary-img">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
</fade-animation>
</template>
<script>
import FadeAnimation from 'common/fade/Fade'
export default {
name: 'CommonGallary',
props: {
showGallary: Boolean,
gallaryImgs: {
type: Array,
default() {
return ['http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg']
}
}
},
components: {
FadeAnimation
},
data() {
return {
swiperOption: {
pagination: '.swiper-pagination',
paginationType: 'fraction',
loop: true,//支持循环轮播
observer:true,
observeParents:true,
},
}
},
methods: {
handleGallaryClose(e) {
e.stopPropagation();
this.$emit('close')
},
handleGallaryShow() {
e.stopPropagation();
this.$emit('show')
}
}
}
</script>
<style lang="stylus" scoped>
.container >>> .swiper-container
overflow: inherit//规定应该从父元素继承 overflow 属性的值。
position: relative
.container
display: flex
flex-direction: column
justify-content: center
z-index: 99
position: fixed
top: 0
left: 0
right: 0
bottom: 0
background: #000
.wrapper
//overflow: hidden
width: 100%
height: 0
padding-bottom: 100%
.gallary-img
width: 100%
.swiper-pagination
color: #fff
position: absolute
bottom: -1rem
</style>
写回答
2回答
-
Dell
2019-05-29
同学微信加我下dell-js,代码发给我,我研究一下
00 -
qq_上帝之手_3
提问者
2019-05-29
我在Banner.vue中套入<fade-animation>的情况下无效不得已写入到Gallary.vue,后一次才出现渐现效果
012019-08-03
相似问题
路由动画效果切换白屏问题
回答 2
没有动画效果是什么原因?
回答 2