title: React bootstrap modal animation property changes doesnt apply as expected
body: <p>I'm trying to create custom ModalManager class and i have problem with showing/hiding animations.I would like to have control how modal will display/hide all the time,for example modal will show up with animation and hide without it.Is there any way to achive such a thing?</p>
  
  <p>Here is some slim example of ModalManager</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class App extends React.Component {
  
   constructor(props){
     super(props)
     
   this.displayModal = this.displayModal.bind(this)
    }
    
    render(){
    
     return (
      &lt;div&gt;
       &lt;ModalManager ref={(c)=&gt;{this.modalManager = c}} /&gt;
        &lt;button onClick={this.displayModal}&gt;display modal&lt;/button&gt;
      &lt;/div&gt;
      )
     
    }
    
    displayModal(){
    
     this.modalManager.display('LoadingModal')
      //fake ajax request
      setTimeout(()=&gt;{
       
        this.modalManager.hide('LoadingModal',false) //hide without animation
       this.modalManager.display('NotificationModal',false) //display without animation
       
      },2500)
    
    }
   
  }
  
  class ModalManager extends React.Component {
  
   constructor(props){
     super(props)
      this.hide = this.hide.bind(this)
      this.display = this.display.bind(this)
      
     this.state = {
      
       modals:{
         'LoadingModal':{
           constructor:LoadingModal,
            props:{
             animation:true,
             show:false,
             hide:this.hide
            }
           },
           'NotificationModal':{
           constructor:NotificationModal,
            props:{
             animation:true,
             show:false,
             hide:this.hide
            }
           }
         }
      
      }
      
    }
    
    render(){
     
      
      
     return(
      &lt;div&gt;
      {Object.keys(this.state.modals).map((key) =&gt;{
       
         var Modal = this.state.modals[key].constructor,
        props = this.state.modals[key].props;
        
       return (
        
         &lt;Modal key={key} modalKey={key} {...props}/&gt;
        
        )
      
      })}
       
        &lt;/div&gt;
      )
     
    }
    
    updateAnimation(key,value){
    
     this.setState((prevState)=&gt;{
        prevState.modals[key].props.animation = value
  
       return {
        
         modals:prevState.modals,
        
        }
      
      })
    
    }
    
    display(key, animation = true){
    
     this.setState((prevState)=&gt;{
  
        prevState.modals[key].props.animation = animation
       prevState.modals[key].props.show = true
  
       return {
        
         modals:prevState.modals,
        
        }
      
      })
    
    }
    
   
    
    hide(key,animation = true){
     this.setState((prevState)=&gt;{
        prevState.modals[key].props.show = false
        prevState.modals[key].props.animation = animation
  
       return {
        
         modals:prevState.modals,
        
        }
      })
      
      setTimeout(()=&gt;{
       this.setState((prevState)=&gt;{
       prevState.modals[key].props.show = false
       return {
        
         modals:prevState.modals,
        
        }
      
      })
      },0)
     
    
    }
    
    
  
  }
  
  class LoadingModal extends React.Component {
  
   constructor(props){
     super(props)
     
      this.hide = this.props.hide.bind(null,'LoadingModal',true)
    }
    
    render(){
    
     return(
      
      
         &lt;ReactBootstrap.Modal {...this.props}&gt;
            &lt;ReactBootstrap.Modal.Header &gt;
              Loading Modal
            &lt;/ReactBootstrap.Modal.Header&gt;
            
             &lt;ReactBootstrap.Modal.Body &gt;
              Loading...
            &lt;/ReactBootstrap.Modal.Body&gt;
            
            &lt;ReactBootstrap.Modal.Footer &gt;
              I will self close in a moment without animation
            &lt;/ReactBootstrap.Modal.Footer&gt;
            
          &lt;/ReactBootstrap.Modal&gt;
            
         
          
       
      
      )
    
    }
  
  }
  
  class NotificationModal extends React.Component {
  
   constructor(props){
     super(props)
     
      this.hide = this.props.hide.bind(null,'NotificationModal',true)
    }
    
    render(){
    
     return(
      
      
         &lt;ReactBootstrap.Modal {...this.props}&gt;
            &lt;ReactBootstrap.Modal.Header &gt;
              Notification Modal
            &lt;/ReactBootstrap.Modal.Header&gt;
            
             &lt;ReactBootstrap.Modal.Body &gt;
              Change modal without animation
            &lt;/ReactBootstrap.Modal.Body&gt;
            
            &lt;ReactBootstrap.Modal.Footer &gt;
            &lt;button onClick={this.hide}&gt;Hide me&lt;/button&gt;&lt;br/&gt;
              I should close with animation
            &lt;/ReactBootstrap.Modal.Footer&gt;
            
          &lt;/ReactBootstrap.Modal&gt;
            
         
          
       
      
      )
    
    }
  
  }
  
  
  ReactDOM.render(&lt;App&gt;&lt;/App&gt;, document.getElementById('app'))</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.2/react-bootstrap.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div id="app"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Its weird because my code work on first transition but when you press hide button it doesn't overwrite default animation property.I have also noticed that div with modal drop doesn't disappear after last modal hide.</p>