html – 具有内联样式的关键帧ReactJS

发布时间：2020-12-14 16:39:22 所属栏目：资源来源：网络整理

导读：我正在尝试在ReactJS中设置脉动动画的关键帧.我尝试在内联样式中设置关键帧,但这不起作用. My code const NewRelpyheButton = ({style = {},open,handleOPenSettings}) = { var bar = { color: '#000',padding: '1em 0',fontSize: '20px',textAlign: 'center

我正在尝试在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%;
}

解决方法

如果您希望将所有样式与组件紧密耦合,请将样式组件放在一边.他们有一个 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!