具有内联样式的关键帧ReactJS

Question

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

我的代码

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中模仿这个:

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

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

html,
body {
  height: 100%;
}

Answer 1

如果您希望将所有样式都紧密地与组件耦合，请尝试使用“样式组件”。他们有关键帧的助手

例如

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>

Answer 2

以下是我们在不添加任何依赖项的情况下实现它的方法。

{/*Your Js File Code */}

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import React from "react";
import "./test.css";

class Anim extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animationName: ""
    };
  }

  addStylesheetRules(rules) {
    var styleEl = document.createElement("style");
    document.head.appendChild(styleEl);
    var styleSheet = styleEl.sheet;
    styleSheet.insertRule(rules, 0);
  }

  clickHdl() {
    let animationName = `animation${Math.round(Math.random() * 100)}`;
    let keyframes = `
    @-webkit-keyframes ${animationName} {
        10% {-webkit-transform:translate(${Math.random() * 300}px, ${
      Math.random() * 300
    }px)} 
        90% {-webkit-transform:translate(${Math.random() * 300}px, ${
      Math.random() * 300
    }px)}
        100% {-webkit-transform:translate(${Math.random() * 300}px, ${
      Math.random() * 300
    }px)}
    }`;

    this.addStylesheetRules(keyframes);

    this.setState({
      animationName: animationName
    });
  }

  render() {
    let style = {
      animationName: this.state.animationName,
      animationTimingFunction: "ease-in-out",
      animationDuration: "0.6s",
      animationDelay: "0.0s",
      animationIterationCount: 1,
      animationDirection: "normal",
      animationFillMode: "forwards"
    };

    return (
      <div>
        <button type="button" onClick={this.clickHdl.bind(this)}>
          Animation!
        </button>
        <div className="box" style={style}></div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Anim />
  </StrictMode>,
  rootElement
);


{/*Css Code test.css */}

.box {
  width: 30px;
  height: 30px;
  background: red;
  border-radius: 50%;
  cursor: pointer;
}

演示：https://codesandbox.io/s/reverent-sun-qjo91?file=/src/index.js