javascript - 如何使 map 上的图像一张一张地随机出现并淡入淡出？

Question

我目前正在为网站创建 Logo 墙。我设法用 map 随机显示它们，但现在我希望能够使它们一一随机显示(例如:图像 1、图像 6、图像 3，...)，并且一旦出现就让它们可见已经出现了。

我想我必须将它们的不透明度设置为 0，然后将它们的不透明度设置为 1，但我不知道如何以随机方式执行此操作。

感谢您的帮助。

编辑:

这是我的代码:

import React from "react"

const logoImages = [
  {
    image: "/assets/img/companies/altiplan.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/ametis.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/amplitrain.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/ar.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/artau.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/assaabloy.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/bag.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/bea.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/besix.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/bombardier.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/bouygues.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/ca.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/cartel.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/citymall.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/coyote.png",
    src: "Michelin",
  },
];

function shuffleMap(array) {
  let currentIndex = array.length, temporaryValue, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array
  /*array.sort(() => Math.random() - 0.5)
  return array*/
}

const Image = ({image, src}) => {
  return (
    <div className='box'>
      <div className='content'>
        <img src={image} alt={src}/>
      </div>

      {/*language=CSS*/}
      <style jsx>{`
        .box {
            min-width: 150px;
            height: 200px;
            overflow: hidden;
            display: flex;
            align-items: center;
            background: #000;
        }

        img {
            width: 120px;
            filter: grayscale(1) invert(100%);
        }
      `}</style>
    </div>
  )
}

const allImages = shuffleMap(logoImages.map((companies, index) => {
  return <Image key={companies.src+index} {...companies}/>
}));

const LogoWall = () => {
  return (
    <div className='container'>
      {
        allImages
      }
      {/*language=CSS*/}
      <style>{`
        .container {
            width: 100vw;
            height: auto;
            display: flex;
            justify-content: space-evenly;
            align-content: space-around;
            flex-flow: row wrap;
        }
      `}</style>
    </div>
  )
};
export default LogoWall

Answer 1

为什么不在显示图像后执行一个间隔

1. 由于不透明度为 0 并且随机堆叠，您的所有图像都是黑色的
2. 立即显示第一张图片，因为 0*1000=0秒
3. 以下图像将以 1 秒的间隔一张一张显示

代码:

logoImages.forEach((x, i) => {
  setTimeout(() => {
    x.style.opacity = 1
  }, i * 1000)
})