Javascript 如何创建类似旋转木马的路由器转换

我想动画我的路由器像“旋转木马”

我有A、B、C、D页

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

我找到了一些制作“淡入淡出”动画的例子，但对“旋转木马”动画一无所知

---

你有什么建议或想法如何使用css等制作吗？

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

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

因此，基本上，与链接中的示例相关，这有点简化，没有垂直旋转选项，也没有单元的动态添加（尽管它将根据.carousel_u_单元div的数量计算适当的值），并且与react router配合使用。虽然不理想，但它确实有效

---

你可以在.

上看到一个完整的例子，因此基本上，一种方法是基于评论中的链接，只是简化并适应了反应。诀窍是让React路由器与转盘一起工作。 对于路由器部分，您将有如下内容：

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

因此，基本上，与链接中的示例相关，这有点简化，没有垂直旋转选项，也没有单元的动态添加（尽管它将根据.carousel_u_单元div的数量计算适当的值），并且与react router配合使用。虽然不理想，但它确实有效

---

您可以在上看到完整的示例。

您的意思是这样的吗？它需要一点数学知识，但它是一个纯粹的基于css的解决方案，可以通过一些js变得更加灵活和强大！这个例子有效吗？（我是包裹的主人）你是指这样的东西吗？它需要一点数学知识，但它是一个纯粹的基于css的解决方案，可以通过一些js变得更加灵活和强大！这个例子有效吗？（我是软件包的所有者）

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

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