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。

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

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

2 个答案: