# [Vue.js] animation of picture doesn't work! Vue.js

The problem is when when using set interval with this top: ${this.imgTop++}px! const vue.js = 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 when adding new image with new position from addedImage: [] and this every picture to go down (top++)

<div class=”randImg”>
<img class=”image” :style=”image.style”
:src=”image.src”
</div>

### Solution :

My guess it’s possible to achieve what you want by adding a watcher on the addedImage array, like every time a new image element is added, you change the style.top of it.

But you shouldn’t use nested 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:

.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

### Solution 2:

this.addedImage is an array of image, not an image. So, when you do this.addedImage.style, you add a style attribute to the array, but not to the images in the array.

Change moveImage for :

moveImage() {