title: Struggling with webkit-transition in javascript
body: <p>I've tried a few variations of using webkit-transition that I've found from googling but I've not been able to get any to work. I have some audio controls that I make appear on a click event, they appear suddenly and jerky so I want to fade them in. The target browser is iOS so I am trying webkit extensions.</p>
  
  <p>This is what I currently have:</p>
  
  <pre><code>  &lt;div id = "controls"&gt;
      &lt;audio id = "audio" controls&gt;&lt;/audio&gt;
    &lt;/div&gt;
  
  
  #controls {
      position:absolute;
      top: 35px;
      left:73px;
      height: 20px;
      width: 180px;
      display:none;
  }
  
  #audio {
      opacity:0.0;
  }
  
  
  audio.src = clip;
  audio.addEventListener('pause',  onPauseOrStop, false);
  audio.addEventListener('ended',  onPauseOrStop, false); 
  audio.play();
  audioControls.style.display = 'block';
  audio.style.setProperty("-webkit-transition", "opacity 0.4s");
  audio.style.opacity = 0.7;
  </code></pre>
  
  <p>The documentation for webkit-transition says it takes effect on a change in the property, so I was assuming changing style.opacity in the last line would kick it off. </p>
  
  <p>The controls appear with an opacity of 0.7 but I want it to fade in and that animation isn't happening.</p>
  
  <p>I also tried this:</p>
  
  <pre><code>#audio {
      opacity:0.0;
      -webkit-transition-property: opacity;
      -webkit-transition-duration: 1s;
      -webkit-timing-function: ease-in;
  }
  </code></pre>
  
  <p>Also tried</p>
  
  <pre><code>audio.style.webkitTransition = "opacity 1.4s";
  </code></pre>
  
  <p>from this posting <a href="https://stackoverflow.com/questions/8742249/how-to-set-css3-transition-using-javascript">How to set CSS3 transition using javascript?</a></p>
  
  <p>I can't get anything to work, I'm testing on iOS, Safari desktop and Chrome. Same non result on all of them.</p>
  
  <h1>UPDATE:</h1>
  
  <p>Following the answers provided the controls now appear in a smooth manner, but fading them out isn't working (they disappear immediately, I've put a long duration in to make sure I can see it happening)</p>
  
  <pre><code>if (audioControls.style.display &amp;&amp; audioControls.style.display === 'block')  {
      // controls are currently displayed
      audio.removeEventListener('pause',  onPauseOrStop, false);
      audio.removeEventListener('ended',  onPauseOrStop, false); 
      audio.pause();
      audioControls.style.display = 'none';
      setTimeout(function () {
          audioControls.style.webkitTransition = "opacity 4.0s";
          audioControls.style.opacity = 0.0;
      }, 0);
  }
  else {
      // controls are not displayed, display them and play the audio
      audio.src = clip;
      audio.addEventListener('pause',  onPauseOrStop, false);
      audio.addEventListener('ended',  onPauseOrStop, false); 
      audio.play();
  
      audioControls.style.display = 'block';
  
      setTimeout(function () {
          audioControls.style.webkitTransition = "opacity 4.0s";
          audioControls.style.opacity = 0.7;
      }, 0);
  }
  </code></pre>