react使用style动态添加样式时如何添加动画

Question

有一个子组件，大致为：

interface ChildProps {
    position: number[];
}
const Child: React.FC<ChildProps> = (props) => {
    let { position } = props;

    let myStyle: React.CSSProperties = {
        width: '10px',
        height: '20px',
        position: 'absolute',
        left: position[0],
        top: position[1],
    }

    return (
        <>
            <div style={myStyle}>

            </div>
        </>
    )
};
export default Child;

父组件：

const Parent: React.FC = () => {
    let position:[200,200]
    
    return (
        <>
            <div className="parent">
                <Child position={position}/>
            </div>
        </>
    )
};
export default Parent;

其中，子组件的样式中,position来自父组件传参，是个动态数据，因此子组件的样式无法写成额外的样式文件，所以直接用style设置了。但是我想添加动画相关的样式，似乎不存在@keyframe或者keyframe这样的属性。

目前我了解到可以使用styled-component插件，请问在不适用任何插件的情况下，有什么解决办法吗？

Answer 1

React Style 对应的是 HTML 中的的内联样式（inline style），内联样式处理的是单个 DOM 元素的样式。但是 @keyframe 是全局的动画关键帧序列，它并不是特定的样式属性，不属于某个 DOM 元素，自然也就不能通过内联样式定义。

如果一定要用 React Style 来实现，有两种情况：

1. 如果 @keyframe 是静态的，可以在 css 文件中定义。style 中通过 animation-name 使用。
2. 如果 @keyframe 要有动态性，styled-components 的实现思路应该是解析代码然后在 HTML 头部的 <style> 标签中定义 @keyframe。可以试着参照这个思路使用 react-helmet 动态加入 @keyframe。还有一种可尝试的方法是通过 JS 操作 CSSKeyframesRule