我试图制作一个具有连续淡入效果的砌体画廊,以便图片一张一张地淡入淡出。还有一个随机播放功能,可以随机化图像,并在随机播放后再次淡入。

这是演示和代码:

https://tuo1t.csb.app/

https://codesandbox.io/s/objective-swartz-tuo1t

首次访问该页面时,动画是正确的。但是,一旦我们单击“随机播放”按钮,就会发生一些奇怪的事情:有些图片在淡入图像后通常没有顺序地淡入,甚至没有淡入动画,它们只是从订购。

我实现这种动画的方式是通过添加基于图像索引的延迟过渡,并使用ref来跟踪图像。

首先,我初始化ref

 let refs = {};
  for (let i = 0; i < images.length; i++) {
    refs[i] = useRef(null);
  }


我渲染了画廊

 <Mansory gap={"1em"} minWidth={minWidth}>
        {imgs.map((img, i) => {
          return (
            <PicContainer
              index={img.index}
              selected={isSelected}
              key={img.index}
            >
              <Enlarger
                src={img.url}
                index={img.index}
                setIsSelected={setIsSelected}
                onLoad={() => {
                  refs[i].current.toggleOpacity(1); <--- start with zero opacity images till those are loaded
                }}
                ref={refs[i]}
                realIndex={i}
              />
            </PicContainer>
          );
        })}
      </Mansory>


对于每个图像组件

class ZoomImg extends React.Component {
  state = { zoomed: false, opacity: 0 };

  toggleOpacity = o => {
    console.log("here");
    this.setState({ opacity: o }); <-- a setter function to change the opacity state via refs:
  };

  render() {
    const {
      realIndex,
      index,
      src,
      enlargedSrc,
      setIsSelected,
      onLoad
    } = this.props;
    return (
      <div style={{ margin: "0.25rem" }} onLoad={onLoad}>
        <Image
          style={{
            opacity: this.state.opacity,
            transition: "opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94)",
            transitionDelay: `${realIndex * 0.1}s` <--- add a delay transition based on the index of the image.
          }}
          zoomed={this.state.zoomed}
          src={src}
          enlargedSrc={enlargedSrc}
          onClick={() => {
            this.setState({ zoomed: true });
            setIsSelected(index);
          }}
          onRequestClose={() => {
            this.setState({ zoomed: false });
            setIsSelected(null);
          }}
          renderLoading={
            <div
              style={{
                position: "absolute",
                top: "50%",
                color: "white",
                left: "50%",
                transform: "translateY(-50%} translateX(-50%)"
              }}
            >
              Loading!
            </div>
          }
        />
      </div>
    );
  }
}


我在setter函数中使用了console.log("here");,它将通过refs来更改不透明度状态。有16张图像,因此最初被称为16次。但是,当我单击“随机播放”按钮时,您会看到它被调用的次数少于16次,因为某些图片直接显示而不会褪色。

我已经为这个问题苦苦挣扎了好几天,并真的希望有人能给我一些提示。

最佳答案

问题是您在shuffle方法中仅添加了一些新图像,一种方法是首先对所有引用应用0不透明度,然后等待几毫秒再次添加1不透明度,例如here

但是,我会推荐一种更好的动画方法,我喜欢shifty及其Tweenable模块。

关于javascript - react :试图用砌体布局实现顺序淡入效果,但顺序不对,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57671489/

10-12 12:55
查看更多