0

如何通过函数操作 css 值。

一旦单击按钮并将转换添加到.boxdiv。

这是JS代码，需要转换成React

Javascript

var x = 1024; // min value
var y = 9999; // max value

var deg = Math.floor(Math.random() * (x - y)) + y;
document.getElementById("box").style.transform = "rotate(" + deg + "deg)";

反应 16

myfunction=()=>{
 var x = 1024; // min value
 var y = 9999; // max value
 let deg = Math.floor(Math.random() * (x - y)) + y;
 let tranf = "rotate(" + deg + "deg)";
 var ani = {
  transform: tranf,
 };
}

<div className="box" style={this.ani}>

<button className="spin" onClick={this.myfunction}>
 Spin
</button>

CSS

.box {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  border: 10px solid #fff;
  transition: all ease 5s;
}

参考 将其构建到 React 中。 https://www.youtube.com/watch?v=Gcz5RM-imJ8

4

2 回答 2

1 
import React, { Component } from "react";
import "./App.css";

class App extends Component {
  state = {
    animationStyle: null,
    hasAnimationStarted: false,
  };
  
  handleOnClick = () => {
    this.setState({ hasAnimationStarted: true } , () => {
    console.log(this.state.hasAnimationStarted)
    console.log(this.state.animationStyle)

    });
  };
  
  componentDidMount() {
    const x = 1024; // min value
    const y = 9999; // max value
    let deg = Math.floor(Math.random() * (x - y)) + y;
    let tranf = "rotate(" + deg + "deg)";
    var ani = {
      transform: tranf,
    };
    this.setState({ animationStyle: ani, hasAnimationStarted: false });
  }

  render() {
    return (
      <div className="mainbox">
        <div
          className="box"
          style={this.state.hasAnimationStarted ? this.state.animationStyle : {}}
        >
          <div className="box1">
            <span className="span1">
              <b>50</b>
            </span>
            <span className="span2">
              <b>50</b>
            </span>
            <span className="span3">
              <b>50</b>
            </span>
            <span className="span4">
              <b>50</b>
            </span>
          </div>
          <div className="box2">
            <span className="span1">
              <b>50</b>
            </span>
            <span className="span2">
              <b>50</b>
            </span>
            <span className="span3">
              <b>50</b>
            </span>
            <span className="span4">
              <b>50</b>
            </span>
          </div>
        </div>
        <button className="spin" onClick={this.handleOnClick}>
          Spin
        </button>
      </div>
    );
  }
}

export default App;

这行得通

于 2020-09-19T12:20:27.843 回答
0

将样式对象保存在 componentDidMount 中的本地状态或直接保存到构造函数中。

componentDidMount() {
     var x = 1024; // min value
     var y = 9999; // max value
     let deg = Math.floor(Math.random() * (x - y)) + y;
     let tranf = "rotate(" + deg + "deg)";
     var ani = {
         transform: tranf,
     };
    this.setState ({animationStyle : ani , hasAnimationStarted : false });
}

然后在 onClick 函数中像这样设置你的样式的值

handleOnClick= () => this.setState({ hasAnimationStarted : true });

组件内部

<div className="box" style={ this.state.hasAnimationStarted? this.animationStyle : {} }>

    <button className="spin" onClick={this.handleOnClick}>
         Spin
    </button>

</div>

所以现在如果你的 hasAnimationStarted 变为 true 你的额外样式将被添加

于 2020-09-19T09:49:21.633 回答