Есть ли способ подделать анимацию цикла в React JS в следующем контексте? - PullRequest
Новая
       6

Есть ли способ подделать анимацию цикла в React JS в следующем контексте?

0 голосов
/ 07 февраля 2019

Я новичок в 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;

1 Ответ

0 голосов
/ 07 февраля 2019

Попробуйте создать функцию, которая запускает условия. 

const conditional = (b,n1,n2) => b?n1:n2;

conditional(somebool,'0px','50px')
...