vue transition淡入淡出

主要是transition的name属性和css的首个单词要一致。

html：

<div class="answer_mask">
    <div  class="mask_byx">
        <transition name="fade"  v-for="(item, index) in imgurl" :key="index">
            <img :src="item.url" class="fadeIn" v-if="imgIndex == index"/>
        </transition>
    </div>
</div>

css：

.fade-enter,
.fade-leave-to {
    opacity: 0;
}
.fade-enter-to,
.fade-leave {
    opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
    transition: all 2s;
}
</style>

我实现的效果是动态切换4张图片，图片淡入淡出，js代码：

async mounted() {
    let _this = this;
    // this.yanshi()
    let _setInterval = setInterval(() => {
        if (this.imgIndex == 3) {
            this.$emit("closemask");
            clearInterval(_setInterval);
            return;
        }
        this.imgIndex++;
    }, 2000);
},

注：

在清理定时器的时候报错：

最后在clearInterval前面加了window就好了，报错的原因好像是vue中有自己内置的clearInterval（）函数，和window中的冲突了，我们需要自己指定一下。