如何实现这种顺序淡入效果？

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>
  );
};

这是完整的示例 。

Answer 2

这是一个例子。 如果您希望HTML一次全部消失，则HTML需要将div包裹在整个正文内容中。 寻找这个：

<div class="wrapper fade-in">

CSS可以做很多事情，我已经使用了很多年了，但我仍然不时地学习一些新知识。

所有的动画命令都会出现在CSS中，如下所示：

@keyframes fadeIn
  to { 
     opacity: 1; }

然后，您的div将具有一个调用动画的类（@keyframes）：

.fade-in {
  animation: fadeIn 1.0s ease forwards;
  [other div properties can be included here]
}

HTML将如下所示：

<div class="fade-in">
[content]
</div>

最后，您需要确保包含供应商代码，以使其与所有浏览器兼容（这将添加大量代码，这就是jQuery可以成为此方面更好的选择的原因）：

@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

供应商代码将必须在CSS的div类中再次重复：

.fade-in {
  animation: fadeIn ease 5s;
  -webkit-animation: fadeIn ease 5s;
  -moz-animation: fadeIn ease 5s;
  -o-animation: fadeIn ease 5s;
  -ms-animation: fadeIn ease 5s;
}