Vue.js：试图淡出（）一个图像和淡入（）另一个

Question

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

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

1) 当我将“this.image”移到 setTimeOut 函数中时，我无法显示它。

2) 我无法让fadeIn() 或fadeOut() 工作，我什至不确定正确的语法是什么。

请查看代码中添加的 cmets。 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上下文

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>