如何创建类似旋转木马的react路由器过渡

Question

我想让我的react路由器像"carousel“一样具有动画效果。

我有A，B，C，D页。

从移动A到移动B，我想从右到左设置动画。从移动B到移动A，我想从左到右设置动画。

我找到了一些制作“淡入淡出”动画的例子，但没有关于“旋转木马”的动画。

你有什么小贴士，或者知道如何用css等来制作它吗？

Answer 1

因此，基本上，一种方法是基于评论中的链接，只是简化并适应反应。诀窍是让React Router与转盘一起工作。对于路由器部分，您将拥有类似以下内容：

<Route path="/:page"
       render={
         props => <Layout selectedPage={props.location.state.selectedPage}/>
       }
/>

然后你就有了导航：

<nav>
  <ul className="navigation">
    <li>
      <Link to={{pathname: '/mypage', state: {selectedPage: 0}}}>
        My page
      </Link>
    </li>
    // additional links omitted for brevity
  </ul>
</nav>

和主布局组件：

const Layout = props => {

  const [radius, setRadius] = useState(0);
  const [theta, setTheta] = useState(0);

  useEffect(() => {
      const carousel = document.querySelector('.carousel');
      const cells = carousel.querySelectorAll('.carousel__cell');
      const cellWidth = carousel.offsetWidth;
      const cellCount = cells.length;
      setTheta(360/cellCount);
      setRadius(Math.round((cellWidth / 2) / Math.tan(Math.PI / cellCount)));
      carousel.style.transform = 'translateZ(' + -radius + 'px)';
      for (let i = 0; i < cellCount; i++) {
        const cell = cells[i];
        cell.style.opacity = 1;
        const cellAngle = theta * i;
        cell.style.transform = 'rotateY(' + cellAngle + 'deg) translateZ(' + radius + 'px)';
      }
    }, [radius, theta]
  );

  useEffect(() => props.selectedPage !== undefined && rotateTo(props.selectedPage), [props.selectedPage]);

  const rotateTo = n => {
    const carousel = document.querySelector('.carousel');
    const angle = theta * n * -1;
    carousel.style.transform = 'translateZ(' + -radius + 'px) rotateY(' + angle + 'deg)';
  };

  return (
    <div className="scene">
      <div className="carousel">
        <div className="carousel__cell">1</div>
        <div className="carousel__cell">2</div>
        <div className="carousel__cell">3</div>
        <div className="carousel__cell">4</div>
        <div className="carousel__cell">5</div>
        <div className="carousel__cell">6</div>
      </div>
    </div>
  );
};

使用必要的css：

.scene {
  border: 1px solid #CCC;
  position: relative;
  width: 100%;
  height: calc(100vh - 3em);
  margin: 0 auto;
  perspective: 1000px;
}

.carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateZ(-288px);
  transform-style: preserve-3d;
  transition: transform 1s;
}

.carousel__cell {
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 10px;
  top: 10px;
  border: 2px solid black;
  line-height: 116px;
  font-size: 80px;
  font-weight: bold;
  color: white;
  text-align: center;
  transition: transform 1s, opacity 1s;
}

因此，基本上，这是与链接中的示例相关的一点简化，没有垂直旋转选项，也没有动态添加单元格(尽管它将根据.carousel__cell div的数量计算适当的值)，并强制与react-router一起工作。不是很理想，但它是有效的。

你可以在https://github.com/luinnarn/carousel-demo上看到完整的例子。