React - CSS过渡就像书页一样

Question

我在学习React和Front Web Dev方面深入研究了更高级的主题。

我学会了关于ReactCSSTransitionGroup的休假/进入..等等。但它似乎不再维持，我们现在必须使用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);
}

希望这有助于您入门。