Question

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.

This is what I currently have:

  <div id = "controls">
    <audio id = "audio" controls></audio>
  </div>


#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;

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.

The controls appear with an opacity of 0.7 but I want it to fade in and that animation isn’t happening.

I also tried this:

#audio {
    opacity:0.0;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    -webkit-timing-function: ease-in;
}

Also tried

audio.style.webkitTransition = "opacity 1.4s";

from this posting How to set CSS3 transition using javascript?

I can’t get anything to work, I’m testing on iOS, Safari desktop and Chrome. Same non result on all of them.

UPDATE:

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)

if (audioControls.style.display && 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);
}

Answer 1

So it sounds like the issue you’re having is that the opacity is being set to 0.7 as soon as the page loads, even though you have it set to 0.0 in the CSS and you’re setting the opacity to something else after you set the transition.

This problem is related to how web browsers work. They are single-threaded and run on an event loop. Things like animations only get processed during a paint event. However, no paint event is happening until after your opacity is set to 0.7. Therefore you need to delay the opacity setting operation until after a paint event gets a chance to process.

The easiest way to accomplish this is to throw it in a setTimeout to get it placed back on the end of the event queue:

audio.style.setProperty("-webkit-transition", "opacity 0.4s");
setTimeout(function () {
    audio.style.opacity = 0.7;
}, 0);

This probably feels a bit awkward, but it gives the browser a chance to paint the control at 0.0 opacity before going back to paint it at 0.7 (which will get animated because of the CSS transition property.