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.
