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

user_tYDk6iCh
  • 65

有一个子组件,大致为:

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插件,请问在不适用任何插件的情况下,有什么解决办法吗?

回复
阅读 774
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
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏