我想在react应用程序中使用过渡效果.根据最新趋势，我应该在react应用程序中使用什么类型/库的动画

Question

我想在我的react js应用程序中使用一些过渡效果。我正在应用程序中使用功能组件。这些天，我如何根据业务需求在应用程序中包含过渡效果？我想使用动画，以便在每次渲染时都能看到效果。如果有人能帮我举个例子，那就太好了。

Answer 1

如果您想使用库，我建议使用react springhttps://react-spring.io/它是基于春季物理学的，如果你想了解更多，请查看https://www.joshwcomeau.com/animation/a-friendly-introduction-to-spring-physics/还有另一个很好的选择，那就是框架运动https://www.framer.com/motion/它显然提供了更多的可能性，也许是开箱即用的(我个人以前从未尝试过(例如，你可以查看他们的网站，他们有很好的例子。

Answer 2

我不确定你想产生什么效果。css本身可以用来生成动画或转换。

是否要查看每次渲染的效果？即，您想将效果与反应渲染循环联系起来？

未存储的值将在每次渲染时更改您可以使用像const trigger = {};这样的简单语句然后使用useEffect 进行触发反应

useEffect(((=>{做某事}，[触发](；

最后，视觉效果。。根据状态应用一个类，并使用setTimeout删除状态(从而删除类(

这可能会过度涉及你想要实现的目标，但这适用于基于问题的所有可能的流程。

Answer 3

下面是一个div元素根据垂直滚动位置移动的例子。仔细看。

首先，使用useState设置位置，并定义window.onscroll函数。

const [cardTop, setCardTop] = useState(0);
window.onscroll = function() {
if (window.pageYOffset < 30) {
setCardTop(window.pageYOffset + 'px');
}
};

其次，将样式的顶部设置为状态变量。

<div className='card t-card' id='tCard' style={{top:`${cardTop}`}}> ...

祝贺你。它的行为可能正是如此。

它类似于使用Jquery或其他Javascript，只使用状态变量。

谢谢。