Vue.js:尝试对一个图像执行fadeOut()操作，对另一个图像执行fadeIn()操作
Vue.js:尝试对一个图像执行fadeOut()操作，对另一个图像执行fadeIn()操作
提问于 2018-06-10 00:03:56
这段工作代码(假设foo/foo_ad1.jpg到foo/foo_ad11.jpg已加载到服务器上)从一组图片中加载随机图片，并每隔几秒钟将其替换为另一张图片。
我试图让图片优雅地淡入淡出，这就是我遇到的两个问题：
1)当我把'this.image‘移入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;
}回答 1
Stack Overflow用户
发布于 2018-06-10 05:23:20
setTimeout上下文
setTimeout(function() {});中的上下文设置不正确，因此this不是计时器回调中的Vue组件。如果您的项目允许使用ES6，则可以使用arrow function来解决此问题：
setTimeout(() => {
this.image = '...';
}, 2000);另一方面，如果你只能使用ES5，你将不得不使用Function#bind来解决这个问题：
setTimeout(function() {
this.image = '...';
}.bind(this), 2000);传入对this的引用的...or
var self = this;
setTimeout(function() {
self.image = '...';
}, 2000);褪色图像
你可以使用Vue的来淡出<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50776105
复制相关文章
相似问题