6

設定した要素に CSS トランジションを適用したいと考えていdisplay: noneます。次のコードを検討してください。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Transition From Hidden</title>

        <style type="text/css">
            div {
                -webkit-transition-property: all;
                -webkit-transition-duration: 2s;
            }       

            div.hidden {
                display: none;
                opacity: 0;
            }    

            div.from {
                opacity: 0;
            }
        </style>     

        <script type="text/javascript">
            function loaded() {
                var e = document.getElementById("foo");
                e.className = "from";
                window.webkitRequestAnimationFrame(function(t) {
                    e.className = null;
                });
            }
        </script>
    </head>
    <body onload="loaded()">
        <div id="foo" class="hidden">
            My test div
        </div>
    </body>
</html>

class="div.hidden"からへclass=""、つまり からdisplay: none; opacity: 0;へ行きたいのですがdisplay: block; opacity: 1;、クロムでは (少なくとも)display: noneアニメーション化されないオブジェクトがあります。要素はすぐに終了状態になります。

これに対する私の回避策は、最初に要素を に設定してからdisplay: block; opacity: 0;、次のフレームで遷移を行うことですrequestAnimationFrame()( -属性を使用しますが、隠し要素をレイアウトしたくないので使用したくありません。visibility

質問は次のとおりです。これは正しい動作ですか、それともバグですか? それが正しい動作であれば、コードを書くためのより良い方法はありますか? それを行うことができるライブラリがあるかどうかを尋ねているわけではないことに注意してください.DOM上で直接行うより良い方法があるかどうか知りたい.

4

6 に答える 6

7

これが仕様に含まれているかどうかに関する質問については、www-style@w3.org のリストに興味深いスレッドがあります。私はそれをすべて読んだわけではありませんが、アニメーションを開始しないようでnoneあり、遷移仕様もそれを明確にする必要があるようです.

更新:メーリングリストに問い合わせたところ、開始状態がdisplay: none.

トランジションが確実に実行されるようにするには、新しいターゲットに設定する前に、アニメーション化されたプロパティの値が計算されていることを確認する必要があります。display が none に設定されている場合、値は通常計算されません。これが実際の例です：

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>Fade</title>

    <style>
      .hidden { display: none }
      .start { opacity: 0 }
      .transition { opacity: 1; -webkit-transition: opacity 1s }
    </style>
  </head>
  <body>
    <div id='div' class="hidden">Test</div>

    <script>
      var elem = document.getElementById('div');

      function ontransitionend(event) {
        elem.className = null;
        elem.removeEventListener('transitionend', ontransitionend);
      }
      elem.addEventListener('transitionend', ontransitionend);

      elem.className = 'start';
      window.getComputedStyle(elem).opacity;
      elem.className = 'transition';
    </script>
  </body>
</html>

opacity プロパティにアクセスする必要があることに注意してください。呼び出すだけでは不十分getComputedStyle()です。

于 2012-11-19T10:31:30.307 に答える
1

小さなステップでインクリメントできないいくつかのcssプロパティ（との間の25％の値は何ですかdisplay？）、特に数値以外のプロパティがあります。あなたが説明している回避策は、これに対処するためのほぼ標準的な方法です。たとえば、jQueryはそのメソッドとメソッドで類似したものを使用します。noneblockfadeInfadeOut

スペースを取らない状態から標準レイアウトへの移行をアニメーション化する場合は、プロパティheightとwidthプロパティを移行できます。

于 2012-11-19T09:59:09.767 に答える
1

私は同じ問題を抱えており、ブラウザーによって許容される動作と見なされるべきではないと思います。問題は、誰かが実際の表示プロパティをアニメーション化しようとしているということではありません。たとえば、表示が更新されてから 10 秒間タイムアウトを設定したとしても、display: none の要素を使用したり、プロパティをインラインなどに更新したり、不透明度をアニメーション化したりすることはできません。

現在の私の回避策は、幅と高さを 0 にし、オーバーフローを非表示にし、これらの値を更新してから、アニメーション属性を更新することです。少なくとも、visibility hidden よりも display none に似た動作をします。

于 2014-07-23T23:43:09.413 に答える
1

display: none は要素に到達できることを意味しますが、最初に要素がレンダリングされていることを確認する必要があります。jqueryでready関数を使用するか、javascriptで実装して、要素がそこにあることを確認できます。以下のように、javascript（タイマーを使用して不透明度を上げる）またはjqueryを使用して上記を行うことができます

<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Transition From Hidden</title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <style type="text/css">

            div.hidden {
                display: none;
                opacity: 0;
            }    

                    </style>     

        <script type="text/javascript">
$.ready = function () {

                $("#foo").fadeIn(2000);

            }
        </script>
    </head>
    <body>
        <div id="foo" class="hidden">
            My test div
        </div>
    </body>
</html>
于 2012-11-19T10:23:52.393 に答える