css - CSS 表示プロパティのトランジション

Question

現在、CSS の「メガ ドロップダウン」メニューを設計しています。基本的には通常の CSS のみのドロップダウン メニューですが、さまざまな種類のコンテンツが含まれています。

現時点では、CSS 3 トランジションは「display」プロパティには適用されないようdisplay: noneです。つまり、 to からdisplay: block(または任意の組み合わせ)へのトランジションを行うことはできません。

上記の例の第 2 層のメニューが、最上位のメニュー項目の 1 つにカーソルを合わせたときに「フェードイン」する方法はありますか?

visibility:プロパティでトランジションを使用できることは承知していますが、それを効果的に使用する方法が思いつきません。

高さも試してみましたが、惨めに失敗しました。

JavaScript を使用してこれを実現するのは簡単なことだとも認識していますが、CSS だけを使用することに挑戦したかったので、少し不足していると思います。

Answer 1

2つ以上のトランジションを連結することができ、visibility今回は便利です。

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

transition（プロパティのベンダープレフィックスを忘れないでください。）

詳細については、この記事をご覧ください。

Answer 2

これを機能させるには、他の方法で要素を非表示にする必要があります。

<div>両方の を絶対位置に配置し、非表示のものを に設定することで効果を達成しましたopacity: 0。

displayプロパティを からnoneに切り替えてもblock、他の要素での遷移は発生しません。

これを回避するには、要素を常に許可しますがdisplay: block、次のいずれかの方法を調整して要素を非表示にします。

1. を に設定heightし0ます。
2. を に設定opacityし0ます。
3. を持つ別の要素のフレームの外側に要素を配置しますoverflow: hidden。

もっと多くの解決策がある可能性がありますが、要素を に切り替えるとトランジションを実行できませんdisplay: none。たとえば、次のようなことを試みることができます。

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}
div.active {
    opacity: 1;
    display: block;
}

しかし、それはうまくいきません。私の経験から、これは何もしないことがわかりました。

このため、常に要素を保持する必要がありますが、次のようにするdisplay: blockことで回避できます。

div {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

Answer 3

この投稿の時点で、すべての主要なブラウザーは、displayプロパティを変更しようとすると CSS トランジションを無効にしますが、CSS アニメーションは引き続き正常に動作するため、回避策として使用できます。

サンプルコード(それに応じてメニューに適用できます)デモ:

次の CSS をスタイルシートに追加します。

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

次にfadeIn、親ホバー (およびもちろん set display: block)で子にアニメーションを適用します。

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

---

Update 2019 - フェードアウトもサポートする方法:

(一部の JavaScript コードが必要です)

// We need to keep track of faded in elements so we can apply fade out later in CSS
document.addEventListener('animationstart', function (e) {
  if (e.animationName === 'fade-in') {
      e.target.classList.add('did-fade-in');
  }
});

document.addEventListener('animationend', function (e) {
  if (e.animationName === 'fade-out') {
      e.target.classList.remove('did-fade-in');
   }
});

div {
    border: 5px solid;
    padding: 10px;
}

div:hover {
    border-color: red;
}

.parent .child {
  display: none;
}

.parent:hover .child {
  display: block;
  animation: fade-in 1s;
}

.parent:not(:hover) .child.did-fade-in {
  display: block;
  animation: fade-out 1s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="parent">
    Parent
    <div class="child">
        Child
    </div>
</div>

Answer 4

が変更された場合にトランジションが無効になる理由displayは、ディスプレイが実際に行うことによるものだと思います。スムーズにアニメーション化できると考えられるものは何も変更しません。

display: none;とvisibility: hidden;は 2 つのまったく異なるものです。
どちらも要素を非表示にする効果がありますが、visibility: hidden;それでもレイアウトでレンダリングされますが、目に見えるわけではありません。
非表示の要素は依然としてスペースを占有し、インライン、ブロック、ブロックインライン、テーブル、またはdisplay要素がレンダリングするように指示するものとしてレンダリングされ、それに応じてスペースを占有します。
他の要素が自動的に移動してそのスペースを占有することはありません。非表示の要素は、実際のピクセルを出力にレンダリングしません。

display: none一方、要素が完全にレンダリングされるのを実際に防ぎます。レイアウトスペースを占有しませ ん。 この要素が占めるスペースの一部またはすべてを占めていた他の要素は、要素がまったく存在しないかのように、そのスペースを占めるように調整されます。

display単なる別の視覚的属性ではありません。、、、、、など、
要素のレンダリング モード全体を確立します。 それらのそれぞれは非常に異なるレイアウトの影響を持ち、それらをアニメートしたりスムーズに移行したりする合理的な方法はありません (たとえば、からまたはその逆のスムーズな移行を想像してみてください!)。blockinlineinline-blocktabletable-rowtable-celllist-item
blockinline

これが、表示が変更された場合にトランジションが無効になる理由です (変更が to または from であってもnone—none単なる非表示ではなく、まったくレンダリングしないことを意味する独自の要素レンダリング モードです!)。

Answer 5

display遷移が機能するプロパティの 1 つではありません。

トランジションを適用できる CSS プロパティのリストについては、アニメーション可能な CSS プロパティを参照してください。補間方法については、CSS 値と単位モジュール レベル 4、値の結合: 補間、加算、累積を参照してください。

CSS 3 までは9.1 にリストされていました。CSS からのプロパティ (警告ポップアップを閉じるだけ)

高さも試してみましたが、惨めに失敗しました。

前回これをしなければならなかったときは、max-height代わりにアニメーション化可能なプロパティを使用しました (少しハックしましたが、うまくいきました)。しかし、複雑なページやローエンドのモバイルを使用するユーザーにとっては非常にジャンキーになる可能性があることに注意してください。デバイス。

Answer 6

この問題のより良い方法を見つけました。CSS アニメーションを使用して、アイテムを表示するための素晴らしい効果を作成できます。

.item {
     display: none;
}

.item:hover {
     display: block;
     animation: fade_in_show 0.5s
}

@keyframes fade_in_show {
     0% {
          opacity: 0;
          transform: scale(0)
     }

     100% {
          opacity: 1;
          transform: scale(1)
     }
}

Answer 7

編集: この例では、display none は適用されていません。

@keyframes hide {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

上で起こっていることは、不透明度がフェードアウトしている間、アニメーション表示の 99% がブロックに設定されているということです。最後の瞬間に表示プロパティは none に設定されています。

最も重要な点は、animation-fill-mode: forwards を使用して、アニメーションが終了した後に最後のフレームを保持することです。

.hide {
   animation: hide 1s linear;
   animation-fill-mode: forwards;
}

以下に 2 つの例を示します: https://jsfiddle.net/qwnz9tqg/3/

Answer 8

私の巧妙なJavaScriptのトリックは、シナリオ全体を2つの異なる関数に分割することです。

準備するために、1つのグローバル変数が宣言され、1つのイベントハンドラーが定義されます。

  var tTimeout;
  element.addEventListener("transitionend", afterTransition, true);//firefox
  element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome

次に、要素を非表示にするときは、次のようなものを使用します。

function hide(){
  element.style.opacity = 0;
}

function afterTransition(){
  element.style.display = 'none';
}

要素を再現するために、私は次のようなことをしています。

function show(){
  element.style.display = 'block';
  tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
  element.style.opacity = 1;
}

これまでのところ、動作します！

Answer 9

position: fixed今日、私が再利用していたモーダルでこれに遭遇しました。私はそれdisplay: noneを維持してからアニメーション化することができませんでした。なぜなら、それはただ出現しただけで、and z-index(負の値など) も奇妙なことをしたからです。

height: 0toも使用してheight: 100%いましたが、モーダルが表示されたときにのみ機能しました。left: -100%これは、または何かを使用した場合と同じです。

すると、簡単な答えがあることに気がつきました。出来上がり：

まず、隠しモーダル。heightisに注目し、transitions の宣言0を確認してください。これには、私のtransitionよりも長い があります。これは、モーダルをデフォルト状態に戻すフェードアウト遷移に影響することに注意してください。height500msopacity

#modal-overlay {
    background: #999;
    background: rgba(33,33,33,.2);
    display: block;
    overflow: hidden;
    height: 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    -webkit-transition: height 0s 500ms, opacity 300ms ease-in-out;
       -moz-transition: height 0s 500ms, opacity 300ms ease-in-out;
            -ms-transition: height 0s 500ms, opacity 300ms ease-in-out;
         -o-transition: height 0s 500ms, opacity 300ms ease-in-out;
        transition: height 0s 500ms, opacity 300ms ease-in-out;
}

次に、目に見えるモーダルです。を に設定している.modal-activeとしbodyます。現在heightは100%であり、トランジションも変更されました。をheight即座に変更し、opacityを取得し300msます。

.modal-active #modal-overlay {
    height: 100%;
    opacity: 1;
    z-index: 90000;
    -webkit-transition: height 0s, opacity 300ms ease-in-out;
       -moz-transition: height 0s, opacity 300ms ease-in-out;
        -ms-transition: height 0s, opacity 300ms ease-in-out;
         -o-transition: height 0s, opacity 300ms ease-in-out;
            transition: height 0s, opacity 300ms ease-in-out;
}

それだけです、それは魅力のように機能します。

Answer 10

に変更overflow:hiddenしoverflow:visibleます。それはよりよく機能します。私はこのように使用します：

#menu ul li ul {
    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul  {
    overflow:visible;
    opacity:1;
    height:140px;
}

visibleoverflow:hiddenのように動作するため、より優れていdisplay:noneます。

Answer 11

それは次のように簡単です:)

@keyframes fadeout {
    0% { opacity: 1; height: auto; }
    90% { opacity: 0; height: auto; }
    100% { opacity: 0; height: 0;
}
animation: fadeout linear 0.5s 1 normal forwards !important;

それをフェードアウトさせてから、それを作りますheight 0;。また、必ず forwards を使用して、最終状態に留まるようにしてください。

Answer 12

Guillermo からの受け入れられた回答が書かれた後、2012-04-03 の CSS トランジション仕様で可視性トランジションの動作が変更され、transition-delay を使用せずに、この問題をより短い方法で解決できるようになりました。

.myclass > div {
                   transition:visibility 1s, opacity 1s;
                   visibility:hidden;  opacity:0
               }
.myclass:hover > div
               {   visibility:visible; opacity:1 }

両方のトランジションに指定された実行時間は、通常は同じにする必要があります (ただし、可視性がわずかに長くても問題ありません)。

実行中のバージョンについては、私のブログ投稿CSS Transition Visibilityを参照してください。

質問のタイトル「ディスプレイ上のトランジション: プロパティ」を書き、Rui Marques と josh からのコメントに応答して、受け入れられた回答:

この解決策は、表示または可視性プロパティが使用されているかどうかが無関係な場合に機能します(おそらくこの質問の場合のように)。

として要素を完全に削除するわけではなく、非表示にするdisplay:noneだけですが、ドキュメント フローに残り、後続の要素の位置に影響を与えます。

同様の要素を完全に削除するトランジションは、display:noneheight (他の回答やコメントで示されているように)、max-height、または margin-top/bottom を使用して行うことができますが、高 さを移行する方法も参照してください: 0; 高さ: 自動; CSSを使用していますか？と私のブログ投稿ディスプレイと高さのプロパティの CSS トランジションの回避策。

GeorgeMillo からのコメントに応えて: 両方のプロパティと両方のトランジションが必要です: opacity プロパティは、フェードインとフェードアウトのアニメーションを作成するために使用され、可視性プロパティは、要素がまだマウス イベントに反応しないようにするために使用されます。視覚効果のための不透明度と、フェードアウトが完了するまで非表示を遅らせるための可視性には、遷移が必要です。

Answer 13

ディスプレイを使用して、これを期待どおりに自然に機能させることができますが、Javascriptを使用するか、他の人が別のタグの中にあるタグを使用した凝ったトリックを提案しているように、ブラウザーを調整する必要があります。内部タグは CSS と寸法をさらに複雑にするため、気にしません。そのため、Javascript ソリューションは次のとおりです。

https://jsfiddle.net/b9chris/hweyecu4/17/

次のようなボックスから始めます。

<div id="box" class="hidden">Lorem</div>

隠し箱です。

div.hidden {
    display: none;
}
#box {
    transition: opacity 1s;
}
    

関連する Q/A にあるトリックを使用し、offsetHeight をチェックしてブラウザを即座にスロットルします。

https://stackoverflow.com/a/16575811/176877

まず、上記のトリックを形式化したライブラリ:

$.fn.noTrnsn = function () {
    return this.each(function (i, tag) {
        tag.style.transition = 'none';
    });
};
$.fn.resumeTrnsn = function () {
    return this.each(function (i, tag) {
        tag.offsetHeight;    
        tag.style.transition = null;
    });
};

次に、これを使用してボックスを表示し、フェード インします。

$('#button').on('click', function() {
    var tag = $('#box');
    if (tag.hasClass('hidden'))
        tag.noTrnsn().removeClass('hidden')
        .css({ opacity: 0 })
        .resumeTrnsn().css({ opacity: 1 });
    else
        tag.css({ opacity: 0 });
});

これにより、ボックスがフェードインおよびフェードアウトします。そのため、.noTrnsn()トランジションをオフにしてから、hiddenクラスを削除すると、displayからnoneデフォルトの に切り替わりますblock。次に、不透明度を 0 に設定して、フェードインの準備をします。ステージを設定したので、トランジションをオンに戻し.resumeTrnsn()ます。最後に、不透明度を 1 に設定してトランジションを開始します。

ライブラリがなければ、表示への変更と不透明度への変更の両方が望ましくない結果をもたらしたでしょう。ライブラリ呼び出しを単純に削除した場合、トランジションはまったく得られません。

上記は、フェードアウト アニメーションの最後に表示を再度 none に設定しないことに注意してください。ただし、より洗練されたものにすることはできます。フェードインして0から高さが伸びるものでやってみましょう。

はで！

https://jsfiddle.net/b9chris/hweyecu4/22/

#box {
    transition: height 1s, opacity 1s;
}

現在、高さと不透明度の両方を移行しています。高さを設定していないことに注意してください。つまり、デフォルトですauto。通常、これはトランジションできません。auto からピクセル値 (0 など) に移動するとトランジションは発生しません。これをライブラリともう 1 つのライブラリ メソッドで回避します。

$.fn.wait = function (time, fn) {
    if (time)
        this.delay(time);
    if (!fn)
        return this;

    var _this = this;
    return this.queue(function (n) {
        fn.call(_this);
        n();
    });
};

これは、jQuery 3.x で現在除外されているアニメーション フレームワークを必要とせずに、jQuery の既存の fx/アニメーション キューに参加できる便利なメソッドです。jQuery がどのように機能するかを説明するつもりはありませんが、.queue()jQuery.stop()が提供する配管は、アニメーションが互いに干渉するのを防ぐのに役立ちます。

スライド ダウン効果をアニメーション化しましょう。

$('#button').on('click', function() {
    var tag = $('#box');
    if (tag.hasClass('hidden')) {
        // Open it
        // Measure it
        tag.stop().noTrnsn().removeClass('hidden').css({
            opacity: 0, height: 'auto'
        });
        var h = tag.height();
        tag.css({ height: 0 }).resumeTrnsn()
        // Animate it
        .css({ opacity: 1, height: h })
        .wait(1000, function() {
            tag.css({ height: 'auto' });
        });
    } else {
        // Close it
        // Measure it
        var h = tag.noTrnsn().height();
        tag.stop().css({ height: h })
        .resumeTrnsn()
        // Animate it
        .css({ opacity: 0, height: 0 })
        .wait(1000, function() {
            tag.addClass('hidden');
        });
    }
});

このコードは、#boxそのクラスをチェックすることによって、現在非表示になっているかどうかをチェックすることから始まります。しかし、スライドアウト/フェード アニメーションの最後にクラスをwait()追加することで、ライブラリ呼び出しを使用してさらに多くのことを実現します。これは、実際に非表示になっている場合に見つかると予想されるものです。上記の単純な例では実行できませんでした。hiddenこれにより、要素の表示/非表示を繰り返し有効にすることもできます。これは、前の例のバグでした。隠しクラスが復元されなかったためです。

また、CSS とクラスの変更が呼び出されて、一般的にアニメーションのステージを設定することも確認できます。これには、 を呼び出す前に、ユーザーに表示せず.noTrnsn()に の最終的な高さを測定し、その完全な設定からアニメーション化するなどの測定が含まれます。目標の CSS 値にステージングします。#box.resumeTrnsn()

古い回答

https://jsfiddle.net/b9chris/hweyecu4/1/

クリックで遷移させることができます：

function toggleTransition() {
  var el = $("div.box1");

  if (el.length) {
    el[0].className = "box";
    el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {
        el[0].className = "box hidden";
    });
  } else {
    el = $("div.box");
    el[0].className = "box";
    el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {
        el[0].className = "box box1";
    });
  }

  return el;
}

someTag.click(toggleTransition);

CSSはあなたが推測するものです：

.hidden {
    display: none;
}
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 20px;
    top: 20px;
    position: absolute;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: scale(.2);
    transform: scale(.2);
    -webkit-transition: transform 2s;
    transition: transform 2s;
}
.box1{
    -webkit-transform: scale(1);
    transform: scale(1);
}

重要なのは、表示プロパティを調整することです。非表示のクラスを削除してから 50 ミリ秒待ってから、追加されたクラスを介してトランジションを開始することで、アニメーションなしで画面にブリップするだけでなく、表示され、必要に応じて展開されます。非表示を適用する前にアニメーションが終了するまで待つことを除いて、同様のことが逆に起こります。

注:ここでは、競合状態.animate(maxWidth)を避けるために乱用しています。あなたや他の誰かがコードに気づいていないときに、隠れたバグをすぐに持ち込んでしまいます。で簡単に殺せます。私はこれを使用して、標準の fx キューに 50 ミリ秒または 2000 ミリ秒の遅延を設定しています。これにより、他のコーダーがこれに基づいて簡単に見つけたり解決したりできます。setTimeoutsetTimeout.animate().stop()

Answer 14

CSS トランジションを始めたばかりの人は、表示プロパティ (block/none) を同時に変更すると機能しないことにすぐに気付くと思います。まだ言及されていない回避策の 1 つはdisplay:block/none、要素を非表示/表示するために引き続き使用できますが、不透明度を 0 に設定して、要素が であっても非表示にすることdisplay:blockです。

次にフェードインするには、不透明度を 1 に設定し、不透明度の遷移を定義する「on」などの別の CSS クラスを追加します。ご想像のとおり、JavaScript を使用してその「on」クラスを要素に追加する必要がありますが、少なくとも実際のトランジションにはまだ CSS を使用しています。

PS両方を実行する必要がある状況に陥った場合は、display:blockクラス「on」を同時に追加し、setTimeoutを使用して後者を延期します。そうしないと、ブラウザは両方のことが同時に起こっていると見なし、遷移を無効にします。

Answer 15

この問題に対する最も簡単な普遍的な解決策は次のとおりdisplay:noneです。CSS で自由に指定できますがblock、JavaScript を使用して (または他のものに) 変更する必要があります。次に、問題の要素に実際にクラスを追加する必要があります。setTimeout()で遷移を行います。それで全部です。

すなわち:

<style>
    #el {
        display: none;
        opacity: 0;
    }
    #el.auto-fade-in {
        opacity: 1;
        transition: all 1s ease-out; /* Future, future, please come sooner! */
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
    }
</style>

<div id=el>Well, well, well</div>

<script>
    var el = document.getElementById('el');
    el.style.display = 'block';
    setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>

これは、最新の正常なブラウザーでテストされました。明らかに、Internet Explorer 9 以前では動作しないはずです。

Answer 16

このソリューションには優れた互換性があり、まだ見ていません。

.hidden-element {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .5s ease-out;
}

.hidden-element.visible {
  position: static;
  z-index: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

説明:visibility: hiddenトリック (1 つのステップで「表示とアニメーション化」と互換性があります) を使用しますが、この組み合わせposition: absolute; z-index: -1; pointer-events: none;を使用して、非表示のコンテナーがスペースを占有せず、ユーザーの操作に応答しないようにします。

Answer 17

トランジション イベントを使用してこれを行うことができるため、トランジション用に 2 つの CSS クラスを作成します。1 つはアニメーションを保持し、もう 1 つは表示なし状態を保持します。アニメが終わってから切り替えるんですか？私の場合、ボタンを押すと div を再度表示し、両方のクラスを削除できます。

以下のスニペットを試してください...

$(document).ready(function() {
  // Assign transition event
  $("table").on("animationend webkitAnimationEnd", ".visibility_switch_off", function(event) {
    // We check if this is the same animation we want
    if (event.originalEvent.animationName == "col_hide_anim") {
      // After the animation we assign this new class that basically hides the elements.
      $(this).addClass("animation-helper-display-none");
    }

  });

  $("button").click(function(event) {

    $("table tr .hide-col").toggleClass(function() {
      // We switch the animation class in a toggle fashion...
      // and we know in that after the animation end, there
      // is will the animation-helper-display-none extra
      // class, that we nee to remove, when we want to
      // show the elements again, depending on the toggle
      // state, so we create a relation between them.
      if ($(this).is(".animation-helper-display-none")) {
        // I'm toggling and there is already the above class, then
        // what we want it to show the elements , so we remove
        // both classes...
        return "visibility_switch_off animation-helper-display-none";
      }
      else {
        // Here we just want to hide the elements, so we just
        // add the animation class, the other will be added
        // later be the animationend event...
        return "visibility_switch_off";
      }
    });
  });
});

table th {
  background-color: grey;
}

table td {
  background-color: white;
  padding: 5px;
}

.animation-helper-display-none {
  display: none;
}

table tr .visibility_switch_off {
  animation-fill-mode: forwards;
  animation-name: col_hide_anim;
  animation-duration: 1s;
}

@-webkit-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes col_hide_anim {
  0%   {opacity: 1;}
  100% {opacity: 0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <theader>
    <tr>
      <th>Name</th>
      <th class='hide-col'>Age</th>
      <th>Country</th>
    </tr>
  </theader>
  <tbody>
    <tr>
      <td>Name</td>
      <td class='hide-col'>Age</td>
      <td>Country</td>
    </tr>
  </tbody>
</table>

<button>Switch - Hide Age column with fadeout animation and display none after</button>

Answer 18

答えが見つからない同様の問題がありました。後でいくつかの Google 検索でここにたどり着きました。私が望んでいた単純な答えが見つからなかったことを考えると、エレガントで効果的な解決策に出くわしました。

visibilityCSS プロパティには、collapseテーブル アイテムに一般的に使用される値があることがわかります。ただし、他の要素で使用すると、効果的にhiddenとしてレンダリングされます。ほとんど同じdisplay: hiddenですが、要素がスペースを占有せず、問題の要素をアニメーション化できるという機能が追加されています。

以下は、この動作の簡単な例です。

function toggleVisibility() {
  let exampleElement = document.querySelector('span');
  if (exampleElement.classList.contains('visible')) {
    return;
  }
  exampleElement.innerHTML = 'I will not take up space!';
  exampleElement.classList.toggle('hidden');
  exampleElement.classList.toggle('visible');
  setTimeout(() => {
    exampleElement.classList.toggle('visible');
    exampleElement.classList.toggle('hidden');
  }, 3000);
}

#main {
  display: flex;
  flex-direction: column;
  width: 300px;
  text-align: center;
}

.hidden {
  visibility: collapse;
  opacity: 0;
  transition: visibility 2s, opacity 2s linear;
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.5s, opacity 0.5s linear;
}

<div id="main">
  <button onclick="toggleVisibility()">Click Me!</button>
  <span class="hidden"></span>
  <span>I will get pushed back up...</span>
</div>

Answer 19

jQuery を使用してクラスを設定している場合、これは 100% 機能します。

$(document).ready(function() {
  $('button').click(function() {
    var container = $('.container');
    
    if (!container.hasClass('active')) {
      container.addClass('show').outerWidth();
      container.addClass('active');
    }
    else {
      container.removeClass('active').one('transitionend', function() {
        container.removeClass('show');
      });
    }
  });
});

.container {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.container.show {
  display: flex;
}
 
.container.active {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Toggle</button>

<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

もちろん、jQuery.fadeIn()と関数だけを使用することもできますが、代わりにクラスを設定する利点は、 ( と のデフォルトである).fadeOut()以外の表示値に遷移したい場合です。block.fadeIn().fadeOut()

flexここでは、素敵なフェード効果で表示に移行しています。

Answer 20

を使用する代わりに、display必要になるまで要素を「画面外」に保存し、その位置を必要な場所に設定して同時に変換することができます。ただし、これにより他の多くの設計上の問題が発生するため、マイレージは異なる場合があります.

とにかく使用したくないでしょうdisplay。スクリーン リーダーがコンテンツにアクセスできるようにしたいからです。スクリーン リーダーは、ほとんどの場合、可視性のルールに従おうとします。エージェントにはコンテンツとして表示されません。

Answer 21

display : none/blockの代わりにCSS のvisibility : hidden/visible を使用するだけです。

div {
    visibility:hidden;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0;
}

parent:hover > div {
    opacity: 1;
    visibility: visible;
}

Answer 22

遷移タイミング機能step-endやstep-start

例: https://jsfiddle.net/y72h8Lky/

$(".run").on("click", function() {
    $(".popup").addClass("show");
});
$(".popup").on("click", function() {
    $(".popup").removeClass("show");
})

.popup {
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1450;
    background-color: rgba(0, 175, 236, 0.6);
    transition: opacity 0.3s ease-out, top 0.3s step-end;
}
.popup.show {
    transition: opacity 0.3s ease-out, top 0.3s step-start;
    opacity: 1;
    top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup"></div>
<button class="run" style="font-size: 24px;">Click on me</button>

Answer 23

これを使用することもできます：

.dropdown {
    height: 0px;
    width: 0px;
    opacity: .0;
    color: white;
}
.dropdown:hover {
    height: 20px;
    width: 50px;
    opacity: 1;
    transition: opacity 200ms;
    /* Safari */
    -webkit-transition: opacity 200ms;
}