Question

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

我在休假/输入时了解了ReactCSSTransitionGroup等等。但似乎它不再被维护了，我们现在必须使用CSSTransitionGroup。

我做了一个小小的侧面项目来尝试新的东西。我可以在两页之间进行幻灯片切换。

但是现在我想通过改变实际页面并发现下一页来做一个像过渡这样的书页来更加麻烦。

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

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

Answer 1

一旦掌握了它们，使用CSS的过渡非常容易。

#myPage {
   transition: all .5s;
}

这一点css会说，如果我的#myPage div上的任何样式更改让我们需要0.5秒才能完成。值得注意的是，它只适用于可数属性值。所以display:none - ＆gt; 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);
}

希望这有助于您入门。

React - CSS过渡就像书页

1 个答案: