Question

我创建了一个代码，该代码将在3秒后更改当前图像。现在，新的当前图像在显示时没有平滑的不透明效果。这看起来很糟糕，我想更改一下。我想用VueJS来做，但不是苹果来做。

目前，图片1被图片2代替。但是我希望图片2被过渡图片替换为图片1。在vueJS中，我发现了以下内容：

        .fade-enter-active, .fade-leave-active {
            transition: opacity .25s ease-in-out;
        }

        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
        {
            opacity: 0;
        }

并且您可以在组件中使用它，但是我不太理解。

当前代码：

const app = new Vue({
el: '#app',
data: {
    images: [
        'img1.jpg', 'img2.jpg', 'img3.jpg'
    ],
    currentImage: 'img1.jpg',
    counter: 0,
    loaded: true
},
created() {
    let self = this;
    setInterval(function () {
        self.loaded = !self.loaded;
        self.currentImage = self.images[self.counter++];
        if (self.counter > self.images.length - 1)
            self.counter = 0;
    }, 3000);
}
});

模板html代码：

<div id="app">
    <div class="col-avatar">
        <div class="prot-image img-fill-container">
            <transition name="fade">
                <img class="avatar" v-if="loaded" :src="'/caro/' + currentImage"
                     alt="Avatar">
            </transition>
        </div>
    </div>
</div>

JS小提琴

https://jsfiddle.net/sheyu2rn/

Answer 1

将.fade-enter, .fade-leave-to更改为.fade-enter-to, .fade-leave-to：

.fade-enter-active, .fade-leave-active {
  transition: opacity .25s ease-in-out;
}

.fade-enter-to, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
{
  opacity: 0;
}

如何在Vue中用不透明过渡轻松替换图像？

1 个答案: