Javascript 创建在react中工作的加载动画

var Hello=React.createClass({
getInitialState:函数（）{
返回{
gridIsLoaded：true
}
},
制作（自我）{
log（'animating…'）；
$（'#loadingDiv'）。动画（{'opacity'：'0'}，500，function（）{
$（'#loadingDiv'）。动画（{'opacity'：'.5'}，500，function（）{
$（'loadingDiv'）。动画（{'opacity'：'1'}，500，function（）{
//如果（！self.state.gridisload）{
self.animate（）；
//}
});
});
});
},
getData（）{
log（'getData已调用'）；
var-artificialTimeout=5000；
var self=这个；
自我动画（self）；
$.ajax({
url:“/echo/js/？js=hello%20world！”，
完成：功能（响应）{
console.log（response.responseText）；
setTimeout（函数（）{
self.setState（{gridIsLoaded:true}）；
}，人工输出）；
},
错误：函数（）{
log（'发生错误！'）；
self.setState（{gridIsLoaded:true}）；
},
});
返回false；
},  
handleClick（）{
console.log（'handleClick'）；
这是getData（）；
this.setState（{gridisload:false}）；
},
render:function（）{
var-loadingJsx；
如果（！this.state.gridisload）{
加载JSX=(
正在加载…请稍候
);
};
返回
{loadingJsx}
;
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

当我点击提交时，它会显示“正在加载，请稍候…”。我希望在显示加载时，不透明度可以设置为进出动画。这是行不通的。然后，如果我再次单击submit，它将执行相同的操作

我如何才能让动画工作

---

外部react工作。

一种更为“react”的方法是，当您想要为元素设置动画时，在元素上切换一个类。因此在本例中，我们可以在网格未加载时有条件地应用animate类（尽管在本例中它是多余的，因为这是它唯一显示的时间）

---

您对添加css没意见，还是更喜欢纯js？这两种方法都可以，但当您将react样式与jquery/dom操作样式混合使用时，您可能需要更改方法，而jquery/dom操作样式通常是不受欢迎的upon@aw04-不管怎样，我都同意。这是一个非常好的答案。

var Hello = React.createClass({
    getInitialState: function() {    
    return {
      gridIsLoaded: true
      }
  },

  animate(self) {    
    console.log('animating...');
    $('#loadingDiv').animate({'opacity': '0'}, 500, function(){
      $('#loadingDiv').animate({'opacity': '.5'}, 500, function(){
          $('#loadingDiv').animate({'opacity': '1'}, 500, function(){
            //if(!self.state.gridIsLoaded){
              self.animate();
            //}
          });
      });
    });
  },

  getData() {
    console.log('getData called.');    
    var artificialTimeout = 5000;
    var self = this;
    self.animate(self);

    $.ajax({

        url:'/echo/js/?js=hello%20world!',
        complete: function (response) {
            console.log(response.responseText);
            setTimeout(function() {
                  self.setState({gridIsLoaded: true});
              }, artificialTimeout);

        },
        error: function () {
            console.log('there was an error!');
            self.setState({gridIsLoaded: true});
        },
    });
    return false;
    },  

  handleClick(){
    console.log('handleClick');
    this.getData();
    this.setState({gridIsLoaded: false});
  },

  render: function() {
    var loadingJsx;
    if (!this.state.gridIsLoaded) {
      loadingJsx = (
          <div id="loadingDiv" style={{ position:'relative', 'width': '100%', 'textAlign': 'center'}} className="text-center">
              Loading... please wait
          </div>);
    };

    return <div>
        {loadingJsx}
      <div>
            <input type="button" value="Submit" onClick={this.handleClick} />      
      </div>
    </div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

loadingJsx = (
  <div id="loadingDiv" className={this.state.gridIsLoaded ? 'text-center' : 'text-center animate'}>
    Loading... please wait
  </div>);

#loadingDiv.animate {
  opacity: 0;
  animation: fadeInOut 1s infinite;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}