vue的 transition-group 轮播图在图片播放时页面会自动跳转到顶部

Question

我用vue的 transition-group 写了一个轮播图的组件，放入页面后正常，但是只要页面向下滚动一点， 在轮播图跳转的时候页面也就自动回到顶部了，请问一下这个问题出在哪里，然后需要怎么解决呢？求大神帮帮忙
我的组件代码如下：

<template>
    <div id="transition-a">
        <div class="box">
            <!-- <ul> -->
            <transition-group tag="ul" name="mj">
                <li v-for="(img,$index) in imgList" :key="$index" v-show="index == $index">
                    <h2>{{$index+1}}</h2>
                    <img :src="img.url" alt="">
                </li>
            </transition-group>
            <!-- </ul> -->
        </div>
    </div>
</template>

<script>
import imgs from "../../static/json.json"
export default{
    name:"transition-a",
    data(){
        return{
            imgList:imgs.data,
            index:0,
        }
    },
    methods:{
        setTime(){
            if(this.index == this.imgList.length - 1){
                this.index = 0
            }else{
                this.index ++
            }
        }
    },
    created(){
        setInterval(this.setTime,1000)
    }
}
</script>

<style scoped>
    .box{
        height: 536px;
        text-align: center;
        padding: 60px 0 5000px 0;
        overflow: hidden;
    }
    ul{
        list-style: none;
        padding:0
    }
</style>

Answer 1

你说的情况很像是 transition动画周期 两个盒子（li标签）同时存在的时候 把父辈标签撑大了 造成的页面高度变化。但是你这里给 .box 有设置了固定高度 和 overflow hidden。所以你可以把 mj 这个动画发出来看看嘛，或者把动画周期调长一些看能不能找到问题？