Struggling with webkit-transition in javascript

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

score 2 · Accepted Answer · answered Sep 05 '12 at 21:36

2

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.

answered Sep 05 '12 at 21:36

Pete

2,538
13
15

Cheers, and thanks for the explanation of the reason due to threading. – Gruntcakes Sep 05 '12 at 22:40
Making the controls fade on appearance works now, but trying to fade them out doesn't work. I've updated my question with further javascript for the part handling the appearance/disappearance of the audio controls. – Gruntcakes Sep 05 '12 at 22:45
1

Setting `display: none;` causes your div to disappear before it's animated. You need to set it after a `transitionend` event as detailed here: http://stackoverflow.com/questions/12277380/css3-transition-cannot-repeat/12277760#12277760 – methodofaction Sep 05 '12 at 22:56
@Duopixel is right, you need to delay your `display: none;` until after the animation is done. You can do this by hooking into an animation event, but I'm a fan of the poor man's solution, which is to simply use `setTimeout(function() { /* set display to "none" */ }, 4000)` (where that 4000 is the length of the animation in milliseconds). – Pete Sep 06 '12 at 03:14

score 1 · Answer 2 · answered Sep 05 '12 at 21:33

1

It seems to me that you hit a Webkit bug, I've never seen this happen with any other html elements, so it must be that you're trying to transition before Webkit is done drawing the controls of the audio element.

To solve this you can either remove display: none from #controls (it will be invisible through opacity anyways) or wrap a timeout when you set the transition:

setTimeout(function(){
 audio.style.setProperty("-webkit-transition", "opacity 0.4s");
 audio.style.opacity = 0.7;
}, 0) //0 works for me in Chrome, but you might need to increase it for Mobile Safari

http://jsfiddle.net/zyGF7/

answered Sep 05 '12 at 21:33

methodofaction

70,885
21
151
164

Thanks for the answer, but Pete pipped you to it by 4 minute so I had to mark his as the accepted answer. – Gruntcakes Sep 05 '12 at 22:41
Actually it's the other way around, but no worries! Pete's answer is great. – methodofaction Sep 05 '12 at 23:00

Struggling with webkit-transition in javascript

UPDATE:

2 Answers2