title: CSS transition is not passing a random number
body: <p>I've set my transition to a random number by using math.floor. I'm not sure why it's not working. When the button is clicked the div jump to its position instead of moving based on the random time that is set. I console logged duration function and I'm getting the random number on my console.</p>
  
  <pre><code>class TransitionComp extends Component{
       state={
          show: true
      }
  
      toggle =(event)=&gt;{
          this.setState({
              show: !this.state.show ? true:false
  
          })
      };
  
        Duration = ()=&gt;{
          return Math.floor(Math.random() * 3000)
      }
  
  
      render(){
          console.log(this.Duration())
          return(
              &lt;div &gt;
  
  
                &lt;Transition
                in={this.state.show}
                timeout={this.Duration()}&gt;
  
                 {state=&gt;
                 &lt;div style={{
                  background: "green",
                  height: "100px",
                  width: "50px",
                  transition: "all ${this.Duration()}s ease-out",
                  transform: state=== "exiting" || state=== "exited"? 
                  "translate(2500%)":"translate(0%)",
                  background: state=== "exiting" || state=== "exited"? "blue" : 
                  "red",
  
                 }}&gt;
                 &lt;/div&gt;
  
  
                 }
  
                &lt;/Transition&gt;
  
  
                &lt;button className="showDiv" onClick= 
                {this.toggle}&gt;Toggle&lt;/button&gt;
  
              &lt;/div&gt;
  
          )
      }
  }
  export default TransitionComp;
  </code></pre>