react中实现组件之间的转场动画
2023-07-04 本文已影响0人
云高风轻
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} 属性添加到相应的组件上，将样式应用到对应的元素上
