1. 前言
- react中如何实现组件之间的 转场/过渡动画,其实和
vue差别也不大
2. 使用 CSS 过渡和动画：
- 可以通过添加 CSS
类名来触发过渡和动画效果。- 在组件进入或离开时，通过
添加或移除类名来改变样式。- React 提供了
className属性来设置组件的类名，可以根据组件的状态来动态改变类名，从而触发过渡和动画效果。
- 带有过渡效果的组件
import React, { useState } from 'react'; import './styles.css'; const App = () => { const [isShown, setIsShown] = useState(false); const toggleShow = () => { setIsShown(!isShown); }; return ( <div> <button onClick={toggleShow}>Toggle Show</button> {isShown && <div className="box">Hello, World!</div>} </div> ); }; export default App;
点击"Toggle Show" 按钮可以切换显示和隐藏组件。- 通过控制
isShown状态的值来决定组件的显示与隐藏
样式
.box { background-color: #ccc; padding: 20px; transition: opacity 0.3s ease; } .box.hidden { opacity: 0; }
- 设置 transition 属性来定义过渡动画的持续时间和过渡效果
- 使用了 opacity 属性来实现淡入淡出的效果。
- 组件的类名中添加或移除 hidden 类名，来触发过渡效果。
- 当 hidden 类名存在时，设置 opacity 为 0，使元素逐渐消失；
- 当 hidden 类名移除时，恢复 opacity 为 1，使元素逐渐显示
3. 使用 React Transition Group：
1.
React Transition Group是一个常用的第三方库，提供了在组件进入和离开时执行过渡动画的功能。
- 它通过在组件的
生命周期方法中添加CSS 类名来实现过渡效果。- 使用 React Transition Group 可以更灵活地定义过渡动画的细节，并且支持自定义过渡效果。
使用步骤
- 安装
npm install react-transition-group
- 代码
import React, { useState } from 'react'; import { CSSTransition } from 'react-transition-group'; import './styles.css'; const App = () => { const [isShown, setIsShown] = useState(false); const toggleShow = () => { setIsShown(!isShown); }; return ( <div> <button onClick={toggleShow}>Toggle Show</button> <CSSTransition in={isShown} timeout={300} classNames="fade" unmountOnExit > <div className="box">Hello, World!</div> </CSSTransition> </div> ); }; export default App;
1.
点击"Toggle Show" 按钮可以切换显示和隐藏组件。
- 使用 CSSTransition 组件包裹要过渡的元素，并通过
in属性来控制元素的显示与隐藏。timeout属性指定过渡动画的持续时间classNames属性指定过渡动画的CSS 类名，unmountOnExit 属性在元素隐藏后自动卸载组件
styles.css
.box { background-color: #ccc; padding: 20px; transition: opacity 0.3s ease; } .fade-enter { opacity: 0; } .fade-enter-active { opacity: 1; transition: opacity 0.3s ease; } .fade-exit { opacity: 1; } .fade-exit-active { opacity: 0; transition: opacity 0.3s ease; }
4.使用 React Spring：
React Spring是另一个流行的动画库，它基于物理动画原理，提供了强大的动画功能。- React Spring 使用 Spring 和 Transition 组件来实现组件之间的过渡动画，可以通过配置动画属性和使用插值函数来创建各种复杂的动画效果
1. 安装
npm install react-spring
代码
import React, { useState } from 'react'; import { useSpring, animated } from 'react-spring'; const App = () => { const [isShown, setIsShown] = useState(false); const fade = useSpring({ opacity: isShown ? 1 : 0, }); const toggleShow = () => { setIsShown(!isShown); }; return ( <div> <button onClick={toggleShow}>Toggle Show</button> <animated.div style={fade}>Hello, World!</animated.div> </div> ); }; export default App;
- 使用
opacity属性来实现淡入淡出的效果。- 组件的样式中使用
animated.div包裹要应用动画效果的元素，并传递 style={fade} 属性，将动画效果应用到元素上- 当点击
"Toggle Show"按钮时，通过修改 isShown状态的值来切换元素的显示与隐藏，从而触发动画效果。
- React Spring 库会根据配置信息自动处理动画的补间过程，使元素平滑地过渡到指定的样式
5. 使用 CSS-in-JS 库：
CSS-in-JS库（如 styled-components、Emotion 等）可以在组件中直接编写 CSS 样式，并提供了动态生成类名的功能。- 通过在组件的
状态变化时动态修改样式，可以实现组件之间的过渡效果。
安装
npm install @emotion/react @emotion/styled
代码
import React from 'react'; import { css } from '@emotion/react'; const App = () => { const containerStyles = css` display: flex; justify-content: center; align-items: center; height: 200px; background-color: lightblue; `; const textStyles = css` font-size: 24px; color: white; `; return ( <div css={containerStyles}> <p css={textStyles}>Hello, CSS-in-JS!</p> </div> ); }; export default App;
- 使用
css 函数从 Emotion 中导入，然后通过调用 css 函数来创建样式。- 使用
模板字符串的方式定义 CSS 样式，就像在普通的 CSS 文件中编写样式一样。- 通过将
css={containerStyles} 和 css={textStyles} 属性添加到相应的组件上，将样式应用到对应的元素上
