Динамически анимированные элементы css

Question

Итак, я кодирую рулетку, которая вращается вбок (справа налево), и я хочу знать, есть ли способ, которым я могу динамически использовать @keyframes, чтобы я мог использовать translateX () со значениями в соответствии с циклом Результат (Рулетка в фоновом изображении). Например: результат округления равен 5. Клиент получает результат с сервера, и рулетка переводит X пикселей, чтобы остановиться на соответствующем числе.

Вот код рулетки:

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

Вы можете установить его в componentDidMount() вроде этого:

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>
    );
  }
}

или вы можете использовать js, чтобы установить стиль элемента на странице, используя функциональность ElementCSSInlineStyle. Это обсуждается здесь .

Я полагаю, вы бы поместили что-то подобное в ваш componentDidMount() (используя перевод, как упомянуто @ yuri-gor):

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

Answer 2

Если я правильно понял ваши требования - вам нужен CSS переход , а не ключевые кадры.

transition: transform 5s;

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

Обратите внимание, что лучше анимировать с помощью изменения преобразования - он будет быть более гладким.