javascript - 如果使用Vue.js显示="none"，如何从数组中删除图像？

Question

我在我的项目中使用Vue.js。我有一个动画图像背景，它们从上到下移动。与随机图像、位置等相关的所有内容都在 created() 内:

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: 250
    }
  },
  created() {
    const randomImg = func => setInterval(func, this.changeInterval);
    randomImg(this.randomImage);
    randomImg(this.addImage);
    randomImg(this.randomPosition);
  },
  mounted: function () {
    if (this.addedImage[i] = {
      style: {display: `none`}
    }) {
      this.addedImage.remove(this.addedImage[i]);
    }
  },
  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(screen.height / 10 - this.imgHeight);
      this.imgLeft = randomPos(screen.width - this.imgWidth);
    },
    addImage() {
      if (this.addedImage.length > 500) {
        this.addedImage.splice(0, 300);
      } else {
        this.addedImage.push({
          style: {
            top: `${this.imgTop}px`,
            left: `${this.imgLeft}px`,
            height: `${this.imgHeight}px`,
            width: `${this.imgWidth}px`
          },
          src: this.selectedImage
        });
      }
    }
  }
}

CSS

.image {
  position: fixed;
  z-index: -1;
  opacity: 0;
  animation-name: animationDrop;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  filter: blur(3px);
  will-change: transform;
}

@keyframes animationDrop {
  15% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.4;
  }

  80% {
    opacity: 0.3;
  }

  100% {
    top: 100%;
    display: none;
  }
}

和 html

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

我的网站滞后，因为图像无限地添加到 DOM。我的动画的想法是，当我的图像 100% 处于关键帧时，它将不显示任何内容。所以我决定简单地在 mounted() 中创建一个 if 语句，但它不起作用；我收到错误消息“ReferenceError:i 未定义”。

当图像不显示时，如何删除图像？

Answer 1

您希望每个图像持续五秒钟(基于您的动画持续时间)，并且您每 250 毫秒添加一张图像(基于您的changeInterval 变量)。这意味着您的图像数组需要最多包含 20 个图像，而不是当前限制为 500 个。

您可以通过修改 addImage 函数来控制这一点，以在添加最新图像之前删除最旧的图像。 (你已经在这样做了，只不过你要等到五百个已经建立起来，然后一次拼接三百个；最好一次做一个:)

addImage() {
  if (this.addedImage.length > 20) {
    this.addedImage.shift() // remove oldest image (the first one in the array)
  }
  // add a new image to the end of the array:
  this.addedImage.push({
    style: {
      top: `${this.imgTop}px`,
      left: `${this.imgLeft}px`,
      height: `${this.imgHeight}px`,
      width: `${this.imgWidth}px`
    },
    src: this.selectedImage
  });
}

无需从 DOM 中读取显示值，您只需依靠时间来确保图像不会在应有的时间之前被删除；只需修改数组即可从 DOM 中删除元素。 (您可以在数组长度中保留一些额外的长度，以防万一，但没有必要一直到 500。) mounted() 对于这种情况没有用，因为函数仅在组件首次绘制到页面时、additionalImages 数组中没有任何内容之前运行一次。