javascript - 我怎样才能实现这种顺序淡入效果？

Question

我看到了这个页面 https://pepecph.com/并认为图片的淡入淡出效果非常酷。

我试图用 styled-component 来模仿这种效果，以传递每张图片的索引，作为在它们全部淡入时将它们分开的方法。

-webkit-animation: ${props =>
    `fadein ${props.index}s`}; /* Safari, Chrome and Opera > 12.1 */

  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

这是演示:https://codesandbox.io/s/focused-clarke-eduf1

然而，无论我如何调整淡入时间，它并没有完全按照该页面似乎在做。在原始页面 ( https://pepecph.com/ ) 上，每张图片都以不同的方式快速显示和延迟一段时间。我检查了原始页面的图像元素，它有这行 css

transition: top 70ms cubic-bezier(0.25,0.46,0.45,0.94),left 70ms cubic-bezier(0.25,0.46,0.45,0.94),transform 70ms cubic-bezier(0.25,0.46,0.45,0.94),height 150ms cubic-bezier(0.25,0.46,0.45,0.94) 70ms,-webkit-transform 70ms cubic-bezier(0.25,0.46,0.45,0.94)

我不擅长css所以我不知道这是否与视觉效果有关。

Answer 1

我稍微编辑了你的代码，让我解释一下我做了什么:

首先我们需要从零不透明度图像开始直到加载这些图像，我们还可以根据图像的索引添加延迟转换。

<Image
  pose={pose}
  {...props}
  style={{
    opacity: this.state.opacity,
    transition: "opacity 2s cubic-bezier(0.25,0.46,0.45,0.94)",
    transitionDelay: `${props.index * 0.5}s`
  }}
/>

我们还需要添加一个 setter 函数来通过 refs 更改不透明度状态:

toggleOpacity = o => {
  this.setState({ opacity: o });
};

棘手的部分是跟踪图像引用，这就是它的样子，我们还删除了所有关键帧，因为它们不再是必需的:

const Gallery = () => {
  const [isSelected, setIsSelected] = useState(null);
  const refs = {};

  let images = [];
  for (let i = 0; i < 10; i++) {
    refs[i] = useRef(null);
    let height = Math.floor(Math.random() * 400 + 400);
    let width = Math.floor(Math.random() * 400 + 400);
    images.push(
      <PicContainer index={i} key={i} selected={isSelected}>
        <ZoomImg
          src={`https://source.unsplash.com/random/${height}x${width}`}
          onLoad={() => {
            // Calling ref function
            refs[i].current.toggleOpacity(1);
          }}
          // Setting ref
          ref={refs[i]}
          index={i}
          setIsSelected={setIsSelected}
        />
      </PicContainer>
    );
  }

  return (
    <Mansory gap={"15em"} minWidth={600}>
      {images.map(image => image)}
    </Mansory>
  );
};

Here is the full example .