CODEWITHSUNDEEP
javascriptcsswebkit
Scrungepipes
Scrungepipes

Reputation: 37581

Struggling with webkit-transition in javascript

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

Upvotes: 0

Views: 2156

Answers (2)

Pete
Pete

Reputation: 2558

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.

Upvotes: 2

methodofaction
methodofaction

Reputation: 72395

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/

Upvotes: 1

Related Questions