具有内联样式的关键帧 ReactJS

Posted 2023-02-22

【中文标题】具有内联样式的关键帧 ReactJS

【英文标题】：Keyframes with Inline Styles ReactJS

【发布时间】：2016-09-23 18:06:27

【问题描述】：

我正在尝试在 ReactJS 中设置脉动动画的关键帧。我尝试只在内联样式中设置关键帧，但这不起作用。

My code

const NewRelpyheButton = (style = , open, handleOPenSettings) => 

    var bar = 
    color: '#000',
    padding: '1em 0',
    fontSize: '20px',
    textAlign: 'center',
    cursor: 'pointer',
    position: 'fixed',
    bottom: '0',
    width: '100%',
    zIndex: '10',
    animation: 'pulse 1.2s ease-in-out',
    animationIterationCount: 'infinite',
    

    Object.assign(style, );
    let openModal;
    if (open) 
        openModal = <Modal><NewRelpyhe/></Modal>
    

    return (
        <div>
        openModal
        <Bar color='purple' style=bar onClick=handleOpenSettings>
            create a new relphye site
        </Bar></div>
    )

我正在尝试在 css 中模仿 this：

.element 
  width: 100%;
  height: 100%;
  animation: pulse 5s infinite;


@keyframes pulse 
  0% 
    background-color: #001F3F;
  
  100% 
    background-color: #FF4136;
  


html,
body 
  height: 100%;

【问题讨论】：

How to dynamically create '@-Keyframe' CSS animations的可能重复

这是因为 React 无法知道 pulse 动画。

【参考方案1】：

如果您希望将所有样式与组件紧密耦合，请尝试使用 Styled Components。他们有一个helper for keyframes

例如

import styled,  keyframes  from 'styled-components'

const pulse = keyframes`
  from 
    background-color: #001F3F;
  

  to 
    background-color: #FF4136;
  
`

const Bar = styled.div`
  color: #000;
  padding: 1em 0;
  font-size: 20px,
  text-align: center;
  cursor: pointer;
  position: fixed;
  bottom: '0',
  width: 100%;
  z-index: 10;
  animation: $pulse 1.2s ease-in-out;
  animation-iteration-count: infinite;
`

然后像这样使用：

<Bar>I pulse</Bar>