「ロードが待っててください...」の

Question

Fiddle

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') 
); 

を反応させる働きのローディングアニメーションを作成します。私は、読み込み中に不透明度をアニメーションで出し入れする必要があります。それは動作していません。それから、もう一度submitをクリックすると同じことが起こります。

アニメーションを機能させるにはどうすればよいですか？

Simple case外部からの反応があります。

Answer 1

もっと反応させるには、アニメーション化したいときに要素のクラスを切り替えることです。この場合、グリッドが読み込まれていないときに条件付きでアニメーションクラスを適用することができます（この場合は唯一の時間であるため、冗長です）。別のアプローチは、style objectを切り替えることであろうけれども

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

は、それから私は、＃loadingDiv.animateに適用するCSSを分離しました。あなたがやっていることに近いスタイルオブジェクトの不透明度プロパティを継続的に更新することもできますが、それはもっと奇妙なものに見えます。

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

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

updated fiddle