1

我正在尝试通过使用APIreact-slick检测幻灯片元素何时与我的根元素相交来在幻灯片进入视口时为其设置动画。IntersectionObserver

这按预期工作。

不起作用的是，当从to react-slick循环回时，第一个反应组件似乎在“赶上”之前暂时失去了状态——即使它已经被渲染了。:last-slide:first-slide

我已经在两个地方演示了这一点，一次使用原生 IntersectionObserver API，一次使用围绕原生 API 的 React Wrapper - react-intersection-observer。

到目前为止，我所拥有的完整代码在下面和这里的沙箱中：

原生：https
: //codesandbox.io/s/react-slick-and-native-intersection-observer-cqtmv React Wrapper：https ://codesandbox.io/s/react-slick-and-react-intersection-observer- qvbum

const ReactSlickDemo = () => {
  const useStyles = makeStyles(theme => ({
    root: {
      display: "flex",
      justifyContent: "center",
      flexWrap: "wrap",
      "& > *": {
        margin: theme.spacing(0.5)
      }
    },
    container: {
      padding: "40px",
      background: "#419be0",
      "& .slick-slide img": {
        margin: "auto"
      }
    },
    initFadeIn: {
      "& *": {
        opacity: 0,
        "& img": {
          opacity: 1
        },
        "& [class*=SWRecordHeader-images-]": {
          opacity: 1
        }
      },
      "& [class*=SWRecordHeader-inner-]": {
        opacity: 1
      }
    },
    runFadeIn: {
      "& *": {
        opacity: 1
      }
    },
    initSlideUp: {
      "& *": {
        webkitTransform: "translateY(30px)",
        transform: "translateY(30px)",
        "& img": {
          webkitTransform: "translateY(-30px)",
          transform: "translateY(-30px)"
        },
        "& [class*=SWRecordHeader-images-]": {
          webkitTransform: "unset",
          transform: "unset"
        }
      }
    },
    runSlideUp: {
      "& *": {
        webkitTransform: "translateY(0px)",
        transform: "translateY(0px)",
        "& img": {
          webkitTransform: "translateY(0px)",
          transform: "translateY(0px)"
        }
      }
    },
    initTransition: {
      "& *": {
        webkitTransition: "all 0.6s ease-in-out",
        transition: "all 0.6s ease-in-out"
      }
    }
  }));
  const classes = useStyles();

  const Component = () => {
    const [toggle, setToggle] = useState(false);
    const el = useRef(null);

    useEffect(() => {
      console.log("effect!");
      const node = el.current;
      const options = {
        threshold: 0.5
      };
      const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting && !toggle) setToggle(true);
          console.log(toggle);
        });
      }, options);
      observer.observe(node);
      return () => observer.unobserve(node);
    }, [toggle, el]);

    return (
      <div
        ref={el}
        className={clsx(
          classes.initTransition,
          classes.initFadeIn,
          classes.initSlideUp,
          {
            [classes.runFadeIn]: toggle,
            [classes.runSlideUp]: toggle
          }
        )}
      >
        <img src="http://placekitten.com/g/400/200" alt="test" />
      </div>
    );
  };

  return (
    <div className={classes.container}>
      <Slider dots>
        {[1, 2, 3, 4].map(item => (
          <Component />
        ))}
      </Slider>
    </div>
  );
};
4

0 回答 0