javascript - React - 像书页一样的 CSS Transition

Question

我在一般情况下学习 React 和 Front Web Dev 时会深入研究更高级的主题。

我了解了 ReactCSSTransitionGroup 和 leave/enter.. 等。但它似乎不再维护了，我们现在必须使用 CSSTransitionGroup。

我做了一些小的副元素来尝试新事物。我能够在两个页面之间进行幻灯片切换。

但现在我想通过使实际页面变形并发现下一页来做一个像过渡这样的书页来使事情变得更有趣。

我环顾四周，但还没有找到解决方案。为此，我也开始阅读有关 WebGL 或纯 CSS3 Transition 的内容，但我完全迷失了。

有人不仅可以提供一个片段，还可以向我解释进行此转换的方法吗？

Answer 1

一旦掌握了 CSS 的过渡效果就非常容易。

#myPage {
   transition: all .5s;
}

这一小段 css 会说，如果我的 #myPage div 有任何样式更改，那么它需要 0.5 秒才能完成。需要注意的是，它只适用于可数的属性值。所以 display:none -> display:block 不会使用过渡效果。你将不得不改变高度/宽度。

#myPage {
    transition: width 2s, height 4s;
}

您还可以通过在 transition 属性之后命名它们来直接定位属性。

此外，您可以使用 css 中的 transform 属性在三维空间中操作元素。

#myPage{
    transition: transform 1s;
}
#myPage:hover{
    transform: rotateX(150deg);
    transform: rotateY(150deg);
    transform: rotateZ(150deg);
}

希望这有助于您入门。