为什么fade组件在banner.vue写没有动画效果,在gallary.vue才有效果?

Question

• 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">&#xe604;</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>

Answer 1

Dell 2019-05-29 23:52:58

同学微信加我下dell-js,代码发给我，我研究一下

Answer 2

提问者 qq_上帝之手_3 2019-05-29 16:09:36

我在Banner.vue中套入<fade-animation>的情况下无效不得已写入到Gallary.vue,后一次才出现渐现效果

• qq_Yilu套一路_rvwEFO #1

  我是谷歌浏览器，渐现的效果没有。 别的浏览器有， 兼容不了谷歌嘛这个动画