更新：

Question

我尝试了一些使用webkit转换的变体，我通过谷歌搜索发现但是我无法让任何工作。我有一些音频控件出现在点击事件上，它们突然出现并且生涩，所以我想淡入它们。目标浏览器是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-transition的文档说它会对属性的更改生效，所以我假设在最后一行中更改style.opacity会启动它。

控件的不透明度为0.7，但我想让它淡入并且不会发生动画。

我也试过这个：

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

也试过

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

来自此帖子How to set CSS3 transition using javascript?

我无法正常工作，我正在iOS，Safari桌面和Chrome上进行测试。所有这些都没有相同的结果。

更新：

根据提供的答案，控件现在以平滑的方式显示，但是淡出它们是不起作用的（它们会立即消失，我已经设置了很长时间以确保我能看到它发生）

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时，不会发生任何绘画事件。因此，您需要延迟不透明度设置操作，直到paint事件有机会处理为止。

实现此目的的最简单方法是将其放入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完成之前转换来绘制{{1元素。

要解决此问题，您可以从audio删除display: none（无论如何都会通过不透明度隐藏）或在设置转换时包装超时：

#controls

http://jsfiddle.net/zyGF7/

在javascript中挣扎着webkit-transition

更新：

2 个答案: