[英]animation of picture doesn't work! Vue.js
The problem is when i am using set interval with this top: ${this.imgTop++}px
! 问题是当我使用这个顶部的设置间隔时:
${this.imgTop++}px
!
const vue = require("@/assets/images/vue.png");
const bootstrap = require("@/assets/images/bootstrap.png");
const bulma = require("@/assets/images/bulma.png");
export default {
name: "randImg",
data() {
return {
images: [
vue,
bootstrap,
bulma
],
addedImage: [],
imgTop: -100,
imgLeft: -100,
imgHeight: 64,
imgWidth: 64,
changeInterval: 750,
selectedImage: ''
}
},
created() {
const randomImg = func => setInterval(func, this.changeInterval);
randomImg(this.randomImage);
randomImg(this.addImage);
randomImg(this.randomPosition);
setInterval(this.moveImage,50);
},
methods: {
randomImage() {
const idx = Math.floor(Math.random() * this.images.length);
this.selectedImage = this.images[idx];
},
randomPosition() {
const randomPos = twoSizes => Math.round(Math.random() * twoSizes);
this.imgTop = randomPos(window.innerHeight - this.imgHeight);
this.imgLeft = randomPos(window.innerWidth - this.imgWidth);
},
moveRandomImage() {
const randomImg = func => setInterval(func, this.changeInterval);
randomImg(this.moveImage);
this.randomImage();
},
addImage() {
this.addedImage.push({
style: {
top: `${this.imgTop}px`,
left: `${this.imgLeft}px`,
height: `${this.imgHeight}px`,
width: `${this.imgWidth}px`
},
src: this.selectedImage
});
},
moveImage() {
this.addedImage.style = {
style: {
top: `${this.imgTop++}px`
}
}
}
}
}
don't understand why but this animataion doesnt work, basically i will explain how it works: every second i am adding new image with new position from addedImage: [] and i want this every picture to go down (top++) 不明白为什么,但这个动画不起作用,基本上我会解释它是如何工作的:每一秒我都在添加新图像与来自addedImage的新位置:[]我希望每张图片都下降(顶部++)
additionally this is a template: 另外这是一个模板:
<div class="randImg">
<img class="image" :style="image.style"
:src="image.src"
v-for="image in addedImage">
</div>
My guess it's possible to achieve what you want by adding a watcher on your addedImage
array, like every time a new image element is added, you change the style.top
of it. 我猜你可以通过在
addedImage
数组上添加一个观察器来实现你想要的,就像每次添加一个新的图像元素一样,你改变它的style.top
。
But you shouldn't use nested setIntervals. 但是你不应该使用嵌套的setIntervals。 I share you this answer explaining why.
我和你分享这个答案,解释原因。
I think a simpler and lighter solution is to use css, like creating a @keyframe
translation rule: 我认为更简单,更轻松的解决方案是使用css,比如创建一个
@keyframe
转换规则:
.drop {
animation: dropDown 1.5s ease-in forwards;
}
@for $i from 1 to 10 {
.drop:nth-child(#{$i}) {
animation-delay: $i * 1.5s;
animation-duration: -1.5s;
}
}
@keyframes dropDown {
0% {
transform: translateY(0);
}
100% {
transform: translateY(600px);
opacity: 0;
}
}
Here's a live example 这是一个实例
this.addedImage
is an array of image, not an image. this.addedImage
是一个图像数组,而不是图像。 So, when you do this.addedImage.style
, you add a style
attribute to your array, but not to the images in the array. 因此,当您执行
this.addedImage.style
,可以向数组添加style
属性,但不向数组中的图像添加style
属性。
Change moveImage for : 更改moveImage:
moveImage() {
this.addedImage.forEach(image => {
image.style.top = image.style.top + 1
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.