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：未定义”。

当图像无显示时如何删除图像？

Answer 1

您希望每张图像持续五秒钟（根据动画持续时间），并且每250ms添加一幅图像（根据您的changeInterval变量）。这意味着您的图像数组最多需要包含二十个图像，而不是您当前限制的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()在这种情况下将无用，因为该函数只运行一次，第一次将组件绘制到页面上时，addedImages数组中没有任何内容。

Answer 2

使用v-if删除样式为display: none的图像。我想你可以删除mounted()中的所有代码。

<div class="randImg">
  <template v-for="image in addedImage">
    <img v-if="image.style.display !== 'none'" class="image" 
       :style="image.style" :src="image.src">
  </template>
</div>

如果使用Vue.js如果display =“ none”，如何从数组中删除图像？

2 个答案: