但是图片切换的时候切换的淡出淡入效果不出现各位能不能帮我看看什么情况，控制台也不报错（相关搜索：轮播图）

Question

这是我写的一个轮播图组件，用vite创建的vue项目，但是图片切换的时候切换的淡出淡入效果不出现各位能不能帮我看看什么情况，控制台也不报错

<template>
    <div class="">
        <div id="box">
            <div class="banner">
                <!--切换的图片-->
                <div class="bannerImg">
                    <transition-group name="fade" tag="ul"  >
                        <li v-for="(item, index) in slideList" :key="index">
                            <a>
                                <img @mouseenter="changeInterval(true)" @mouseleave="changeInterval(false)"
                                    :src="item.image" v-show="index == currentIndex" />
                            </a>
                        </li>
                    </transition-group>
                </div>
                <!--切换的小按钮-->
                <div class="bannerItems">
                    <span v-for="(item, index) in slideList" :class="index == currentIndex ? 'active' : ''"
                        @click="changeImg(index)">{{ index + 1 }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            slideList: [
                { 'clickURL': '#', 'desc': '美食1', 'image': '/img/1.jpeg' },
                { 'clickURL': '#', 'desc': '美食2', 'image': '/img/2.webp' },
                { 'clickURL': '#', 'desc': '美食3', 'image': '/img/3.webp' },
                { 'clickURL': '#', 'desc': '美食4', 'image': '/img/4.webp' },
                { 'clickURL': '#', 'desc': '美食5', 'image': '/img/5.webp' },
                { 'clickURL': '#', 'desc': '美食6', 'image': '/img/6.webp' },
            ],
            currentIndex: 0,
            timer: null
        }
    },
    components: {
    },
    methods: {
        //定时器
        startInterval() {
            // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
            clearInterval(this.timer);
            this.timer = setInterval(() => {
                this.currentIndex++;
                if (this.currentIndex > this.slideList.length - 1) {
                    this.currentIndex = 0
                }
            }, 3000)
        },
        //园点切换图片
        changeImg(index) {
            this.currentIndex = index
        },
        //鼠标移入移出
        changeInterval(val) {
            if (val) {
                clearInterval(this.timer)
            } else {
                this.startInterval()
            }
        },
    },
    mounted() {
        this.startInterval()
    }
}
</script>

<style scoped>


* {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

a {
    text-decoration: none;
}

.banner {
    width: 1080px;
    height: 720px;
    margin: 20px auto;
    position: relative;
}

.bannerImg img {
    width: 1080px;
    height: 720px;
    position: absolute;
    z-index: 800;
}

.bannerItems {
    position: absolute;
    z-index: 1000;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}


.bannerItems span {
    width: 30px;
    height: 30px;
    background: rgba(100, 100, 100, .6);
    margin: 0 5px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    font-family: Microsoft YaHei;
    line-height: 30px;
    text-align: center;
    color: white;
    cursor: pointer;


}

.bannerItems span.active {
    background-color: red;
}

/* 过渡效果样式-实现图片的淡入淡出效果 */
.fade-leave-active,
.fade-enter-active {
    transition: opacity 0.5s ease;
}

.fade-leave-from,
.fade-enter-to {
    opacity: 0;
}
</style>

Answer 1

【相关推荐】

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7673177
• 这篇博客你也可以参考下：写一个简单的 Vue 页面，实现选择框选中时，下拉选择框禁用的功能
• 您还可以看一下 尹庆阳老师的手把手教你从0开始搭建一个vue项目课程中的 创建工程小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 快给你的Vue项目添加一个编辑图片组件吧中的 但是发现还是没有隐藏掉,需要我们对样式进行修改 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  // ...
  document.getElementsByClassName("tui-image-editor-main")[0].style.top = 0;
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^