[Vuejs]-Animation of picture doesn't work! Vue.js

by

0👍

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.

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

0👍

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

Change moveImage for :

moveImage() {
  this.addedImage.forEach(image => {
    image.style.top = image.style.top + 1
  });
}

Leave a comment