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

CSSで不透明度を設定していて、トランジションを設定した後に不透明度を別のものに設定し0.7ているにもかかわらず、ページが読み込まれるとすぐに不透明度が設定されているという問題があるようです。 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 トランジション プロパティによりアニメーション化されます)。

于 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 に答える