[英]How to delete image from array if display=“none” using Vue.js?
I am using Vue.js in my project. 我在我的项目中使用Vue.js。 I have a background of images which are animated, they are moving from up to down.
我有一个动画背景图像,它们从上到下移动。 Everything connected to the random image, position and etc is inside
created()
: 连接到随机图像,位置等的所有内容都在
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 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;
}
}
and html 和html
<div class="randImg">
<img class="image" :style="image.style"
:src="image.src"
v-for="image in addedImage">
</div>
My site is lagging because images are adding to the DOM infinitely. 我的网站很落后,因为图像无限地添加到DOM中。 The idea of my animation is that when my image is on keyframe 100% it will have display none.
我的动画的想法是,当我的图像位于关键帧100%时,将不会显示任何内容。 So I decide to simply create an if statement inside
mounted()
but it doesn't work; 因此,我决定在
mounted()
简单地创建一个if语句,但是它不起作用; I get the error message "ReferenceError: i is not defined". 我收到错误消息“ ReferenceError:未定义”。
How can I delete the images when their display become none? 没有显示图像时如何删除图像?
You want each image to persist for five seconds (based on your animation-duration), and you're adding one image every 250ms (based on your changeInterval variable). 您希望每张图像持续五秒钟(基于动画持续时间),并且每250ms添加一幅图像(基于changeInterval变量)。 This means that your image array needs to contain a maximum of twenty images, rather than the 500 you're currently limiting it to.
这意味着您的图像数组最多需要包含二十个图像,而不是您当前限制的500个图像。
You could control this by modifying your addImage function to drop the oldest image before adding the newest one. 您可以通过修改addImage函数在添加最新图像之前删除最旧图像来控制此操作。 (You're already doing this, except that you're waiting until five hundred of them have built up and then splicing off three hundred at once; better to do it one at a time:)
(您已经在执行此操作,只是要等到其中五百个已建立起来,然后一次拼接三百个;最好一次执行一次:)
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
});
}
There's no need to read the display value from the DOM, you can just depend on the timing to ensure that the images aren't removed before they're supposed to; 无需从DOM读取显示值,您可以仅取决于时间,以确保在应有的图像被移除之前就不会将其删除; modifying the array is all that's necessary to remove the elements from the DOM.
修改数组是从DOM中删除元素所必需的。 (You could harmlessly leave a few extra in the array length, just in case, but there's no need to go all the way to 500.)
mounted()
wouldn't be useful for this case because that function only runs once, when the component is first drawn onto the page, before there's anything in the addedImages array. (为了以防万一,您可以无害地在数组长度中保留一些额外的长度,但是不必一直到500。)
mounted()
在这种情况下将无用,因为当函数仅运行一次时,组件首先被绘制到页面上,然后addedImages数组中没有任何内容。
Using v-if to remove images which style is display: none
. 使用v-if删除
display: none
样式的display: none
。 And i think you can delete all code in mounted()
. 而且我认为您可以删除
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.