有没有办法在以下上下文中伪造 React JS 中的循环动画

Question

我是 React 的新手，正在学习如何制作样式动画。我创建了以下动画，当页面呈现时，该动画将元素向下移动 50px。来自、到和配置的道具是反应弹簧库的一部分。

import React, { Component } from 'react';
import sphere from '../img/sphere.png';
import { Spring, config } from 'react-spring'
import '../Sphere.css';
class BioSphere extends Component {
  state = { top: 0 }
  render() {
    const float = (num) => {
      if(num == 0) {
        return 50;
        this.setState({
          top: 50
        })
      } else {
        return 0;
      }
    };
    return(
      <div style={this.props} className="sphere">
        <Spring
          from = {{top: '0px'}}
          to = {{top: `${float(this.state.top)}px`}}
          config = {config.slow} >
          {props => (
            <div style={props}>
              <img style={props} className='img' src={sphere} alt={' '}/>
            </div>
          )}
        </Spring>
      </div>
    );
  }
}
export default BioSphere;

Answer 1

尝试创建一个运行条件的函数。

const conditional = (b,n1,n2) => b?n1:n2;
conditional(somebool,'0px','50px')