在javascript中使用webkit转换挣扎

Question

我试过使用webkit转换的一些变体，我从google搜索中发现了这些变体，但是我一直无法获得任何工作。我有一些音频控件出现在点击事件中，它们突然出现，所以我想让它们淡入。目标浏览器是iOS，因此我正在尝试使用webkit扩展。

这是我目前有：

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

对WebKit的过渡的文件说，它发生在该财产的变化效果，所以我是假设在最后一行会踢它改变style.opacity关闭。

该控件显示的不透明度为0.7，但我希望它淡入并且不会发生动画。

我也试过这样：

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

也试过

​​

从这个发布How to set CSS3 transition using javascript?

我不能得到任何工作，我测试在iOS，Safari浏览器桌面和Chrome。所有这些都没有结果。

UPDATE：

按照提供的控件现在出现在顺利地答案，但衰落出来不工作（他们立即消失了，我在把一个持续时间长，以确保我能看到它的发生）

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

所以它听起来您遇到的问题是页面加载后不透明度设置为0.7，即使您在CSS中将其设置为0.0，并且您在设置转换后将不透明度设置为其他值。

此问题与Web浏览器的工作方式有关。它们是单线程的，并在事件循环中运行。诸如动​​画之类的东西只能在绘画事件中处理。但是，除非将您的不透明度设置为0.7之后之后才会发生绘画事件。因此，您需要延迟不透明度设置操作，直到绘画事件有机会处理。

完成此操作的最简单方法是把它扔在一个setTimeout把它放回事件队列的末尾：

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

这可能感觉有点尴尬，但它给人的浏览器机会绘制控制0.0不透明度之前回去绘制它在0.7（这将获得动画，因为CSS过渡属性。

Answer 2

在我看来，你打了Webkit的错误，我从来没有见过这种情况发生与任何其他HTML元素，所以它一定是你想要的Webkit完成绘制前过渡audio元素的控件。

为了解决这个问题，你可以从#controls删除display: none（它会通过不透明隐形反正）或当您设定的过渡包超时：

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/