0

我已经尝试了一些使用 webkit-transition 的变体，这些变体是从谷歌搜索中找到的，但我一直无法使用。我有一些音频控件出现在点击事件上，它们突然出现并且生涩，所以我想将它们淡入。目标浏览器是 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";

从这篇文章如何使用 javascript 设置 CSS3 过渡？

我什么都做不了，我正在 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);
}
4

2 回答 2

2

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

此问题与 Web 浏览器的工作方式有关。它们是单线程的并在事件循环上运行。像动画这样的东西只会在绘制事件期间得到处理。但是，直到您的不透明度设置为之后，才会发生绘制事件0.7。因此，您需要延迟不透明度设置操作，直到绘制事件有机会处理之后。

完成此操作的最简单方法是将其放入 asetTimeout以将其放回事件队列的末尾：

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

这可能感觉有点尴尬，但它让浏览器有机会在0.0不透明地绘制控件，然后再返回绘制它0.7（由于 CSS 过渡属性，这将获得动画效果。

于 2012-09-05T21:36:39.760 回答
1

在我看来，您遇到了 Webkit 错误，我从未见过任何其他 html 元素发生这种情况，因此您一定是在 Webkit 完成绘制audio元素控件之前尝试转换。

要解决这个问题，您可以display: none从#controls（无论如何通过不透明度将不可见）删除或在设置转换时包装超时：

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/

于 2012-09-05T21:33:16.370 回答