为动态中文网站加进许多动画电影效用是几项明显改善采用者新体验的有效率形式，建立听觉上很漂亮的文本时，或是当想注重两个原素从一类状况到另一类状况的过渡阶段时，以给采用者增添听觉上的震撼人心，给采用者遗留下第一印象。总之，绝非动画电影圣埃卢瓦，要恰如其分。
责任编辑所推荐 3 个 React 动画电影库，它更易采用，因此只需减少食量和听觉效用，就能让事显得有意思而不能过分采用。
React Transition Group
React Transition Group 别列济夫两个单纯和强悍的新颖动画电影库。
那个库同时实现效用比较单纯：它惟一做的是追踪模块的 enter 和 exit 状况。怎样处置那些重要信息和下定决心怎样制做动画电影，依赖于开发人员和或其 CSS 专业技能。做为两个前端开发技师如果对金融行业内常用的动画电影效用的同时实现基本原理有很大的介绍，即使能他们同时实现。新颖服务器端别列济夫为的是降低成本，而非替代其专业技能。
npm install react-transition-group –save
看一看上面的实例标识符：
import Header from “./header”;
import Footer from “./footer”;
import { useState } from “react”;
import { Transition } from “react-transition-group”;
const duration = 300;
const defaultStyle = {
transition: `opacity${duration}ms ease-in-out`,
opacity: 0,
};
const transitionStyles = {
entering: { opacity: 1 },
entered: { opacity: 1 },
exiting: { opacity: 0 },
exited: { opacity: 0 },
};
export default function Layout({ children, title }) {
const [inProp, setInProp] = useState(false);
const delay = () => {
setTimeout(() => {
!inProp && setInProp(!inProp);
}, 500);
};
delay();
return (
<>
<Header title={title} />
<main>
<Transition in={inProp} timeout={500}>
{(state) => (
<div
style={{
…defaultStyle,
…transitionStyles[state],
}}
>
{children}
</div>
)}
</Transition>
</main>
<Footer />
</>
);
}
具体能查阅标识符仓库：https://github.com/QuintionTang/react-blog/tree/animated
那个库的主要优势是入门比较单纯。然而，这也是主要的缺点，因为它在很大程度上依赖于对 CSS 过渡阶段的介绍。
React Reveal
React-Reveal与前面的例子完全相反。它没有提供基本的构建块来完成想的所有自定义动画电影，而是带有一组预定义动画电影效用供采用。
npm install react-reveal –save
看一看上面的实例标识符：
import Header from “./header”;
import Footer from “./footer”;
import { useState } from “react”;
import Fade from “react-reveal/Fade”;
export default function Layout({ children, title }) {
let [show, setShow] = useState(false);
const delay = () => {
setTimeout(() => {
!show && setShow(!show);
}, 500);
};
delay();
return (
<>
<Header title={title} />
<main>
<Fade top when={show}>
{children}
</Fade>
</main>
<Footer />
</>
);
}
具体能查阅标识符仓库：https://github.com/QuintionTang/react-blog/tree/animated-reveal
如果希望为应用程序加进许多微妙的效用，而不必担心 CSS、过渡阶段和除了要导入的模块之外的任何其他事，这绝对是两个更好的选择。
React Spring
最后，如果对于对听觉要求更高，那么能选择 React Spring。与前两个专注于 CSS 过渡阶段相比，React Spring 允许加进 spring-physics-based 的动画电影。
换句话说，采用CSS过渡阶段，能设置两个初始的听觉状况，和两个最终的听觉状况，并告诉它在给定的时间内在它之间进行过渡阶段，但采用基于React Spring 的物理，能建立听觉上吸引人的动画电影，看起来和行为“更自然”。就好像实际上是在采用弹簧来移动或拉动原素一样。
npm install react-spring –save
看一看上面的实例标识符：
import Header from “./header”;
import Footer from “./footer”;
import { useState } from “react”;
import { useSpring, config, animated } from “react-spring”;
export default function Layout({ children, title }) {
const [show, setShow] = useState(true);
const properties = {
to: { opacity: 1 },
from: { opacity: 0 },
reset: true,
delay: 200,
config: config.molasses,
};
const toggleText = () => {
setShow(!show);
api.start({
…properties,
to: { opacity: show ? 1 : 0 },
from: { opacity: show ? 0 : 1 },
});
};
const [props, api] = useSpring(() => properties);
const delay = () => {
setTimeout(() => {
!show && toggleText();
}, 500);
};
delay();
return (
<>
<Header title={title} />
<main>
<animated.div style={props}>{children}</animated.div>
</main>
<Footer />
</>
);
}
具体能查阅标识符仓库：https://github.com/QuintionTang/react-blog/tree/animated-spring
