优美的Reactl列表动画：Styled-Components动画实践
原创文章，未经允许，禁止转载
先看效果图(录制软件限制，只有30祯，真实效果可以运行源码)，源码点这里，欢迎star
基础动画如下：
组合动画如下：
带缩放的动画如下：
1 动画实现的基本原理
所谓万变不离其宗，我们的动画底层还是依靠css提供的animation动画
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
@keyframes name {
0% {}
100% {}
}
fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式默认为
none：在动画执行之前和之后不会应用任何样式到目标元素，即采用初始样式
forwards：将动画结束之后的样式应用在元素上，即不采用初始样式
2 和styled-components结合起来
主要采用styled-components(CSS in JS方案)提供的styled方法定义CSS animation动画参数，配合提供的keyframes方法定义各种类型动画实现,
例如，定义一个从底往上进入的动画
import styled, { keyframes } from "styled-components";
const bottomToTop = keyframes`
0% {
transform: translateY(50%);
}
100% {
transform: translateY(0);
}
`
export const BottomToTop = styled.div`
transform: translateY(50%);
animation: ${bottomToTop} 300ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: 150ms;
`
为了让每个列表项的动画开错落有序，还需要将动画的延时时间做下处理
animation-delay: ${props => (props.index ?? 0) * 150}ms
为了更灵活的使用，将延时参数、动画时长参数，设置为动态的变量
animation: ${bottomToTop} ${props => props.duration ?? 300}ms;
animation-delay: ${props => (props.index ?? 0) * (props.delay ?? 150)}ms
即完整的动画定义为下面这样
import styled, { keyframes } from "styled-components";
export interface AnimationProps {
index?: number
duration?: number
delay?: number
}
const bottomToTop = keyframes`
0% {
transform: translateY(50%);
}
100% {
transform: translateY(0);
opacity: 1
}
`
export const BottomToTop = styled.div<AnimationProps>`
transform: translateY(50%);
opacity: 0;
animation: ${bottomToTop} ${props => props.duration ?? 300}ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: ${props => (props.index ?? 0) * (props.delay ?? 150)}ms
`
接着在列表渲染的地方使用BottomToTop组件
const App: () => {
return <>
// ...
{
new Array(5).fill(null).map((_, idx) => <BottomToTop key={idx} index={idx}>
<YourComponents />
</BottomToTop>)
}
</>
}
此时动画样式虽然很舒服了，但是还不够优雅
我们给动画加个回弹动画
const bottomToTop = keyframes`
0% {
transform: translateY(50%);
}
80% {
transform: translateY(-10%);
}
100% {
transform: translateY(0);
}
`
这样动画就更加有灵性了
实现其余基础动画的方式与此类似，具体可以参考源码
下面展示下组合动画的
3 思路打开
除了逐个有序的渲染列表，我们还可以考虑按照一定规律给不同的元素使用不同的话，
3.1 左右交错
例如，如果是奇数项，元素就从右边进入，如果是偶数项，就从左边进入
const App: () => {
return <>
// ...
{
new Array(5).fill(null).map((_, idx) => idx % 2 === 0
? <RightToLeft key={idx} index={idx} duration={300} delay={50}>
<YourComponents />
</RightToLeft>
: <LeftToRight key={idx} index={idx} duration={300} delay={50}>
<YourComponents />
</LeftToRight>)
}
</>
}
3.2 上下交错
例如，如果是奇数项，元素就从上边进入，如果是偶数项，就从下边进入
const App: () => {
return <>
// ...
{
new Array(5).fill(null).map((_, idx) => idx % 2 === 0
? <TopToBottom key={idx} index={idx} duration={300} delay={50}>
<YourComponents />
</TopToBottom>
: <BottomToTop key={idx} index={idx} duration={300} delay={50}>
<YourComponents />
</BottomToTop>)
}
</>
}
3.3 左右交错的同时载增加从下到上的动画
甚至，你还可以给交错的列表增加点别的动画，例如左右交错的同时载增加从下到上的动画
const App: () => {
return <>
// ...
{
new Array(5).fill(null).map((_, idx) => idx % 2 === 0
? <BottomToTop key={idx} index={idx} duration={300} delay={50}>
<RightToLeft index={idx} duration={300} delay={50}>
<YourComponents />
</RightToLeft>
</BottomToTop>
: <BottomToTop key={idx} index={idx} duration={300} delay={50}>
<LeftToRight index={idx} duration={300} delay={50}>
<YourComponents />
</LeftToRight>
</BottomToTop>
)
}
</>
}
4 思路再打开
我们不要局限于仅有的translateX、translateY、translate属性，还可以尝试下其余的动画属性，例如，我使用scale属性增加了缩放动画，组合我们列表动画，效果如下
const scale = keyframes`
0% {
transform: scale(0.8);
}
70% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1
}
`
export const Scale = styled.div<AnimationProps>`
transform: scale(1);
opacity: 0;
animation: ${scale} ${props => props.duration ?? 300}ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: ${props => (props.index ?? 0) * (props.delay ?? 150)}ms
`
从上面你或许可以看到，我的组合动画似乎比较繁琐，例如，从左到右同时从下到上，我使用了translateX、translateY组合，而不是直接定义translate，其实我考虑到基础动画，组合起来使用场景更广，所以就这样使用了，当然，如果需要，你也可以单独加上这样的基础动画。
如果你有更好的思路，欢迎交流