Vue.js：尝试fadeOut（）一个图像和fadeIn（）另一个

Question

这段代码（假设foo / foo_ad1.jpg通过foo / foo_ad11.jpg加载到服务器上）从一组图片中加载一张随机图片，并每隔几秒就用另一张图片替换它。

我试图让图片优雅地淡入淡出，这就是我遇到两个问题的地方：

1）我无法得到这个.image＆＃39;当我将它移动到setTimeOut函数时显示。

2）我无法使fadeIn（）或fadeOut（）正常工作，我甚至不确定正确的语法是什么。

请参阅代码中添加的评论。 TY

JS：

Vue.component('foo-ad-module', {
    data() {
        return {
            image:  'foo/foo_ad1.jpg',
            timer:  '',
            x:          0
        }
    },
    created: function() {
        this.replaceImage();
        this.timer = setInterval(this.replaceImage, parseInt((Math.random() * 33599)%30000) + 5000)
    },  
    methods: {
        init(){
            this.x = parseInt((Math.random() * 33599)%11) + 1;
              this.image = 'foo/foo_ad' + this.x + '.jpg';
              console.info("this.image = " + this.image);
       },
       replaceImage: function() {
            this.x = parseInt((Math.random() * 33599)%11) + 1;
//#if
           this.image = 'foo/foo_ad' + this.x + '.jpg';     // ...THIS WORKS (when it is outside the setTimeout())
//#else
//          $(???).fadeOut("2000");                                     // ... intending to put a fadeOut() here...
            setTimeout(function () {        
                console.info("this is working...");                                                          
//              this.image = 'foo/foo_ad' + this.x + '.jpg';    // ... THIS DOESN'T WORK (when it is inside the setTimeout())
//              $(???).fadeIn("2000");                                  //  ... intending to put a fadeIn() here...                                         
            }, 2000);
//#endif            

            clearInterval(this.timer)         
        this.timer = setInterval(this.replaceImage, (parseInt((Math.random() * 33599)%30000) + 5000));        
       },
  },
    beforeDestroy() {
      clearInterval(this.timer)
    },  
    mounted(){
        this.init()
    },  
    template: `
                <div class="foo-ad-module " >
               <img :src="image" alt="hi there">
                </div>  `
});

CSS：

.foo-ad-module {
    width:          198px;
    height:         198px;
    border:         1px solid #555;     
    border-radius:  10px;
    margin-bottom:  10px;
}

Answer 1

setTimeout context

在setTimeout(function() {});中未正确设置上下文，因此this不是计时器回调中的Vue组件。如果您的项目允许使用ES6，则可以使用arrow function来解决问题：

setTimeout(() => {
  this.image = '...';
}, 2000);

另一方面，如果您只能使用ES5，则必须使用Function#bind来解决问题：

setTimeout(function() {
  this.image = '...';
}.bind(this), 2000);

...或传递对this的引用：

var self = this;
setTimeout(function() {
  self.image = '...';
}, 2000);

褪色图像

您可以使用Vue的<transition>淡化<img>：

new Vue({
  el: '#demo',
  data() {
    return {
      show: true
    }
  }
})

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

<script src="https://unpkg.com/vue@2.5.16"></script>

<div id="demo">
  <button v-on:click="show = !show">
    Toggle image
  </button>
  <div>
    <transition name="fade">
      <img v-if="show" src="//placekitten.com/100/100" alt="kitten">
    </transition>
  </div>
</div>