анимация картинки не работает!Vue.js - PullRequest
Новая
       27

анимация картинки не работает!Vue.js

0 голосов
/ 25 марта 2019

Проблема в том, что я использую заданный интервал с этим top: ${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`
        }
      }
    }
  }
}

не понимаю почему, но эта анимация не работает, в основном я объясню, как это работает: каждую секунду я добавляю новое изображение с новой позицией из AddedImage: [] , и я хочу, чтобы каждое изображение уменьшалось (top ++)

дополнительно это шаблон: 

<div class="randImg">
    <img class="image" :style="image.style"
         :src="image.src"
         v-for="image in addedImage">
</div>

Ответы [ 2 ]

0 голосов
/ 25 марта 2019

this.addedImage - это массив изображений, а не изображений. Поэтому, когда вы делаете this.addedImage.style, вы добавляете атрибут style к вашему массиву, но не к изображениям в массиве.

Изменить moveImage для: 

moveImage() {
  this.addedImage.forEach(image => {
    image.style.top = image.style.top + 1
  });
}
0 голосов
/ 25 марта 2019

Полагаю, можно добиться того, чего вы хотите, добавив наблюдатель в ваш массив addedImage, как каждый раз, когда добавляется новый элемент изображения, вы меняете style.top его.

Но выне должен использовать вложенные setIntervals.Я делюсь с вами этим ответом , объясняющим почему.

Я думаю, что более простое и легкое решение - использовать 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;
  }
}

Вот живой пример

...