如何實現這種順序淡入效果？

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