动态动画元素 css

Question

So, I'm coding a roulette that spins sideways (right to left) and I want to know if there is any way I can dynamically use @keyframes, so I can use the translateX() with values according to the round result (The Roulette is in a background image). Eg: The round result is 5. The client receives the result from the server and the roulette translates X pixels to stop in the corresponding number.

Here is the roulette code:

import React, { useState, useEffect } from "react";
import { socket } from "../../App.js";

import "./roulette.css";

export default class Roulette extends React.Component {
  constructor(props) {
    super(props);
    this.socket = socket;
    this.roulette = React.createRef();
    this.state = {
      result: null,
    };
  }

  componentDidMount() {
    this.setState({
      backgroundPositionX: (this.roulette.current.offsetWidth - 78) / 2
    });
    this.socket.on("roulette.roll", position => {
      //TODO: Retrieve from the server how much pixels should be translated  
});
  }

  render() {
    return (
      <div className="main-r flex items-center justify-center">
        <div ref={this.roulette} className="roulette relative">
          <div
            style={{backgroundPosition: this.state.backgroundPositionX + "px" + "0"}
            className="roulette-bg h-full w-full" //The roulette background image, that is suposed to translate when the result is give is in this div
          ></div>
          <div className="roulette-marker absolute"></div>
        </div>
      </div>
    );
  }
}

Answer 1

You could set it in componentDidMount() sort of like this:

export default class Roulette extends React.Component {
  constructor(props) {
    super(props);
    this.socket = socket;
    this.roulette = React.createRef();
    this.state = {
      result: null,
      backgroundPositionX: null
    };
  }

  componentDidMount() {
    this.setState({
      backgroundPositionX: (this.roulette.current.offsetWidth - 78) / 2
    });
    this.socket.on("roulette.roll", position => {
        this.setState({
            backgroundPositionX: position
        });
      //TODO: Retrieve from the server how much pixels should be translated  
});
  }

  render() {
    return (
      <div className="main-r flex items-center justify-center">
        <div ref={this.roulette} className="roulette relative">
          <div
            style={{backgroundPosition: this.state.backgroundPositionX + "px"}
            className="roulette-bg h-full w-full" //The roulette background image, that is suposed to translate when the result is give is in this div
          ></div>
          <div className="roulette-marker absolute"></div>
        </div>
      </div>
    );
  }
}

or you can use js to set the style of an element on the page using ElementCSSInlineStyle functionality. It's discussed here .

I believe you would put something like this in your componentDidMount() (using translate like @yuri-gor mentioned):

const bgElement = window.document.querySelector('.roulette-bg');
bgElement.style.transform = 'translateX(42px)';

Answer 2

If I got your requirements correctly - you need CSS transition , not keyframes.

transition: transform 5s;

element.style.transform = 'translateX(42px)';

Note that it's better to animate via changing transform - it will be rendered smoother.