Estoy tratando de hacer un botón con estilo de globo aerostático que flote (se traduce sobre el espacio x e y). Actualmente estoy usando la variable CSS para establecer las propiedades de la animación, pero solo puedo hacer esto una vez o recibo un error que dice
"TypeError: no se puede asignar a la propiedad de solo lectura '--animation-time' del objeto '#'"
¿Cómo soluciono esto para poder establecer nuevas propiedades aleatorias sobre dónde comienza, termina la animación y cuánto dura? Actualmente tengo esto:
class HotAir extends React.Component{ constructor(props){ super(props); this.state = { link: props.link, cls: props.cls, img: props.img, text: props.text, } } render(){ var cssProperties = {}; cssProperties['--animation-time'] = Math.random()*10 + 's'; console.log(cssProperties); return( <div className="balloon" style={cssProperties} onAnimationEnd={()=> cssProperties['--animation-time'] = '60s'}> <Link to={this.state.link}><button className="balloonbutt"> <img src={this.state.img} alt=""></img> <div className="balloontext">{this.state.text}</div></button> </Link> </div> ); } }y este es mi css relevante
.balloon{ --animation-time: 60s; --x-float-start: 10vw; --y-float-start: 10vh; --x-float-end: 20vw; --y-float-end: 20vh; position: relative; text-align: center; color: white; animation: float var(--animation-time) linear; } @keyframes float{ 0%{ left: var(--x-float-start); top: var(--y-float-start); } 100%{ left: var(--x-float-end); top: var(--y-float-end); } }He modificado tu código de una manera más Reacty. Estaba usando un objeto var y mutando los datos, que no es como React espera que se hagan las cosas. Actualicé mi código y espero que su herramienta de pelusa no se queje después de los cambios.
Cambios:
cssProperties al estado para que la reacción sea consciente de esa propiedad.this.setState({ ...this.state, cssProperties: { '--animation-time': '60' } });
import React, { Component } from 'react'; import { render } from 'react-dom'; import Hello from './Hello'; import './style.css'; interface AppProps {} interface AppState { name: string; cssProperties; } class App extends Component<AppProps, AppState> { constructor(props) { super(props); this.state = { name: 'React', cssProperties: { '--animation-time': Math.random() * 10 + 's', '--x-float-start': Math.trunc(Math.random() * 200) - 10 + 'px', '--y-float-start': Math.trunc(Math.random() * 200) - 10 + 'px', '--x-float-end': Math.trunc(Math.random() * 200) - 10 + 'px', '--y-float-end': Math.trunc(Math.random() * 200) - 10 + 'px' } }; } render() { console.log(this.state.cssProperties); return ( <div className="balloon" style={this.state.cssProperties} onAnimationIteration={() => { console.log(this.state.cssProperties); this.setState({ ...this.state, cssProperties: { ...this.state.cssProperties, '--x-float-start': this.state.cssProperties['--x-float-end'], '--y-float-start': this.state.cssProperties['--y-float-end'], '--x-float-end': Math.trunc(Math.random() * 200) - 10 + 'px', '--y-float-end': Math.trunc(Math.random() * 200) - 10 + 'px' } }); }} > <Hello name={this.state.name} /> <p>Start editing to see some magic happen :)</p> </div> ); } } render(<App />, document.getElementById('root'));Actualizar
Como necesitas una animación infinita, tu CSS debería tener esa opción.
animation: float var(--animation-time) linear infinite;