\u5728\u73b0\u4ee3 Web \u5f00\u53d1\u4e2d，\u52a8\u753b\u548c\u8fc7\u6e21\u6548\u679c\u4e0d\u4ec5\u4ec5\u662f\u89c6\u89c9\u4e0a\u7684\u70b9\u7f00，\u5b83\u4eec\u5728\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u3001\u5f15\u5bfc\u7528\u6237\u6ce8\u610f\u529b\u4ee5\u53ca\u589e\u5f3a\u4ea4\u4e92\u6027\u65b9\u9762\u626e\u6f14\u7740\u91cd\u8981\u89d2\u8272\u3002\u4f5c\u4e3a\u4e00\u6b3e\u5e7f\u53d7\u6b22\u8fce\u7684\u524d\u7aef\u6846\u67b6，React \u63d0\u4f9b\u4e86\u591a\u79cd\u5b9e\u73b0\u52a8\u753b\u7684\u65b9\u5f0f，\u4ece\u7b80\u5355\u7684 CSS \u7c7b\u540d\u5207\u6362\u5230\u529f\u80fd\u5f3a\u5927\u7684\u52a8\u753b\u5e93\u5982 React Transition Group \u548c Framer Motion\u3002\u672c\u6587\u5c06\u6df1\u5165\u63a2\u8ba8\u8fd9\u4e9b\u6280\u672f，\u5e2e\u52a9\u5f00\u53d1\u8005\u4e3a React \u5e94\u7528\u6dfb\u52a0\u6d41\u7545\u3001\u81ea\u7136\u4e14\u5438\u5f15\u4eba\u7684\u52a8\u753b\u6548\u679c\u3002<\/p>\n
\u672c\u6587\u7684\u76ee\u6807\u8bfb\u8005\u662f\u5e0c\u671b\u63d0\u5347 UI \u4ea4\u4e92\u4f53\u9a8c\u7684\u5f00\u53d1\u8005，\u5185\u5bb9\u5305\u62ec\u4ee5\u4e0b\u51e0\u4e2a\u65b9\u9762：<\/p>\n
\u901a\u8fc7\u672c\u6587\u7684\u5b66\u4e60，\u4f60\u5c06\u5168\u9762\u638c\u63e1 React \u4e2d\u52a8\u753b\u548c\u8fc7\u6e21\u6548\u679c\u7684\u5b9e\u73b0\u65b9\u6cd5，\u5e76\u80fd\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u7075\u6d3b\u8fd0\u7528\u8fd9\u4e9b\u6280\u672f\u3002<\/p>\n
CSS \u52a8\u753b\u662f\u901a\u8fc7 CSS \u6837\u5f0f\u89c4\u5219\u63a7\u5236 HTML \u5143\u7d20\u968f\u65f6\u95f4\u53d8\u5316\u7684\u4e00\u79cd\u6280\u672f\u3002\u5b83\u5305\u62ec\u4e24\u79cd\u4e3b\u8981\u5f62\u5f0f：\u8fc7\u6e21（Transition） \u548c \u5173\u952e\u5e27\u52a8\u753b（Keyframes）\u3002\u5728 React \u4e2d，\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u52a8\u6001\u6539\u53d8\u5143\u7d20\u7684\u7c7b\u540d\u6216\u6837\u5f0f\u5c5e\u6027，\u89e6\u53d1\u8fd9\u4e9b\u52a8\u753b\u6548\u679c\u3002<\/p>\n
React \u672c\u8eab\u5e76\u6ca1\u6709\u5185\u7f6e\u7684\u52a8\u753b\u7cfb\u7edf，\u4f46\u5b83\u901a\u8fc7\u72b6\u6001\u7ba1\u7406（State）\u548c\u6761\u4ef6\u6e32\u67d3\u63d0\u4f9b\u4e86\u4e0e CSS \u52a8\u753b\u7ed3\u5408\u7684\u5929\u7136\u652f\u6301\u3002\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 useState \u6216\u5176\u4ed6\u72b6\u6001\u7ba1\u7406\u5de5\u5177\u63a7\u5236\u7ec4\u4ef6\u7684\u72b6\u6001，\u7136\u540e\u6839\u636e\u72b6\u6001\u53d8\u5316\u52a8\u6001\u5207\u6362 CSS \u7c7b\u540d，\u4ece\u800c\u89e6\u53d1\u52a8\u753b\u3002<\/p>\n
\u8ba9\u6211\u4eec\u4ece\u4e00\u4e2a\u7b80\u5355\u7684\u663e\u793a\/\u9690\u85cf\u52a8\u753b\u5f00\u59cb：<\/p>\n
import<\/span> {<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span> function<\/span> ToggleAnimation<\/span>(<\/span>)<\/span> {<\/span> return<\/span> (<\/span> export<\/span> default<\/span> ToggleAnimation;<\/span><\/p>\n \/* styles.css *\/<\/span> .visible<\/span> {<\/span> .hidden<\/span> {<\/span> \u5982\u679c\u9700\u8981\u66f4\u590d\u6742\u7684\u52a8\u753b，\u53ef\u4ee5\u4f7f\u7528 @keyframes：<\/p>\n import<\/span> {<\/span> useState }<\/span> from<\/span> 'react'<\/span>;<\/span> function<\/span> BounceAnimation<\/span>(<\/span>)<\/span> {<\/span> return<\/span> (<\/span> export<\/span> default<\/span> BounceAnimation;<\/span><\/p>\n \/* styles.css *\/<\/span> .bounce<\/span> {<\/span> @keyframes<\/span> bounce<\/span> {<\/span>
\nimport<\/span> '.\/styles.css'<\/span>;<\/span><\/p>\n
\n const<\/span> [<\/span>isVisible,<\/span> setIsVisible]<\/span> =<\/span> useState<\/span>(<\/span>false<\/span>)<\/span>;<\/span><\/p>\n
\n <<\/span>div><\/span>
\n <<\/span>button onClick=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setIsVisible<\/span>(<\/span>!<\/span>isVisible)<\/span>}<\/span>><\/span>
\n {<\/span>isVisible ?<\/span> '\u9690\u85cf'<\/span> :<\/span> '\u663e\u793a'<\/span>}<\/span>
\n <<\/span>\/<\/span>button><\/span>
\n <<\/span>div className=<\/span>{<\/span>`<\/span>box <\/span>${<\/span>isVisible ?<\/span> 'visible'<\/span> :<\/span> 'hidden'<\/span>}<\/span><\/span>`<\/span><\/span>}<\/span>><\/span><<\/span>\/<\/span>div><\/span>
\n <<\/span>\/<\/span>div><\/span>
\n )<\/span>;<\/span>
\n}<\/span><\/p>\n
\n.box<\/span> {<\/span>
\n width<\/span>:<\/span> 100px;<\/span>
\n height<\/span>:<\/span> 100px;<\/span>
\n background-color<\/span>:<\/span> #3498db;<\/span>
\n transition<\/span>:<\/span> opacity 0.5s ease-in-out;<\/span>
\n}<\/span><\/p>\n
\n opacity<\/span>:<\/span> 1;<\/span>
\n}<\/span><\/p>\n
\n opacity<\/span>:<\/span> 0;<\/span>
\n}<\/span><\/p>\n\n
\n
1.2.2 \u4f18\u70b9\u4e0e\u5c40\u9650\u6027<\/h5>\n
\n
\n
\n
1.2.3 \u6269\u5c55：\u4f7f\u7528\u5173\u952e\u5e27\u52a8\u753b<\/h5>\n
\nimport<\/span> '.\/styles.css'<\/span>;<\/span><\/p>\n
\n const<\/span> [<\/span>isBouncing,<\/span> setIsBouncing]<\/span> =<\/span> useState<\/span>(<\/span>false<\/span>)<\/span>;<\/span><\/p>\n
\n <<\/span>div><\/span>
\n <<\/span>button onClick=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setIsBouncing<\/span>(<\/span>!<\/span>isBouncing)<\/span>}<\/span>><\/span>
\n {<\/span>isBouncing ?<\/span> '\u505c\u6b62'<\/span> :<\/span> '\u5f39\u8df3'<\/span>}<\/span>
\n <<\/span>\/<\/span>button><\/span>
\n <<\/span>div className=<\/span>{<\/span>`<\/span>ball <\/span>${<\/span>isBouncing ?<\/span> 'bounce'<\/span> :<\/span> ''<\/span>}<\/span><\/span>`<\/span><\/span>}<\/span>><\/span><<\/span>\/<\/span>div><\/span>
\n <<\/span>\/<\/span>div><\/span>
\n )<\/span>;<\/span>
\n}<\/span><\/p>\n
\n.ball<\/span> {<\/span>
\n width<\/span>:<\/span> 50px;<\/span>
\n height<\/span>:<\/span> 50px;<\/span>
\n background-color<\/span>:<\/span> #e74c3c;<\/span>
\n border-radius<\/span>:<\/span> 50%;<\/span>
\n}<\/span><\/p>\n
\n animation<\/span>:<\/span> bounce 1s infinite;<\/span>
\n}<\/span><\/p>\n
\n 0%<\/span> {<\/span>
\n transform<\/span>:<\/span> translateY<\/span>(<\/span>0)<\/span>;<\/span>
\n }<\/span>
\n 50%<\/span> {<\/span>
\n transform<\/span>:<\/span> translateY<\/span>(<\/span>-100px)<\/span>;<\/span>
\n }<\/span>