ディスプレイ上の遷移：プロパティ

Question

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

現時点では、 CSS3遷移は 'display'プロパティには適用されないようです つまり、display: noneからdisplay: blockへの遷移（または任意の組み合わせ）はできません。

誰かがトップレベルのメニュー項目の1つにカーソルを合わせたときに、上の例の2段目のメニューが「フェードイン」する方法を考えることができますか？

私はあなたが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>sを絶対に配置し、隠されたものを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アニメーションを適用します： - （そしてもちろんdisplay: blockを設定します）

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

---

更新2019年 - フェードアウトもサポートする方法：

（一部のJSが必要です）

// 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

reasonは、「ディスプレイ」が変更された場合に遷移が無効になるのは、ディスプレイが実際に行うことによるものと思われます。 notは、おそらくスムーズにアニメーション化できるものを変更します。

「display：none;」と「visibility：hidden;」は、2つの全体異なるものです。どちらも、要素を非表示にする効果がありますが、「可視性：非表示」であり、まだレイアウトにレンダリングされますが、そうではありません可視的にそうです。隠された要素は依然としてスペースを占有し、インラインで、またはブロックまたはブロック-インラインまたはテーブルとして、または「表示」要素がレンダリングするように指示するものとしてレンダリングされ、それに応じてスペースを占有します。他の要素はnotを自動的に移動してそのスペースを占有します。非表示の要素は、実際のピクセルを出力にレンダリングしません。

一方、「display：none」は実際にはpreventsレンダリングからの要素全体です。 anyレイアウトスペースを占有しません。この要素が占めるスペースの一部または全部を占める他の要素は、要素が単にまったく存在しなかったのように、そのスペースを占めるように調整されます。

「ディスプレイ」は単なる視覚的な属性ではありません。ブロック、インライン、インラインブロック、テーブル、テーブル行、テーブルセル、リストアイテムなど、要素のレンダリングモード全体を確立します！それぞれに非常に異なるレイアウト分岐があり、それらをアニメーション化またはスムーズに移行する合理的な方法はありません（「ブロック」から「インライン」、またはその逆へのスムーズな移行を想像してみてください！）。

これが、表示が変更された場合にトランジションが無効になっている理由です（「none」への変更または「none」からの変更であっても、「none」は単に非表示ではなく、独自の要素レンダリングモードであり、レンダリングがまったく行われません！）

Answer 5

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

遷移を適用できるCSSプロパティのリストについては https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties を参照してください。補間方法については、 https://drafts.c​​sswg.org/css-values-4/#combining-values を参照してください。

CSS3までは https://www.w3.org/TR/2017/WD-css-transitions-1-20171130/#animatable-cssにリストされていました

私も身長を使ってみましたが、それはただ惨めに失敗しました。

前回これを行わなければならなかったので、代わりにmax-heightを使用しました。これはアニメート可能なプロパティです（ちょっとしたハックですが、うまくいきました）。モバイルデバイスを終了します。

Answer 6

これは非常に古い質問ですが、このスレッドを見ている人のために、blockプロパティにカスタムアニメーションを追加することができます。

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

デモ

このデモでは、サブメニューがdisplay:noneからdisplay:blockに変わり、それでもフェードアウトします。

Answer 7

CSSにはないコールバックの代わりに、transition-delayプロパティを使うことができます。

#selector {
    overflow: hidden; // hide the element content, while height = 0
    height: 0; opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
    height: 100%; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}

だから、ここで何が起こっているの？

1. visibleクラスを追加すると、heightとopacityの両方が遅延なしでアニメーションを開始します（0ms）。ただし、heightはアニメーションを完了するのに0msかかり（display: blockと同等）、opacityは600msかかります。

2. visibleクラスが削除されると、opacityはアニメーションを開始し（0ミリ秒の遅延、400ミリ秒の長さ）、heightは400ミリ秒間待機し、その後すぐに（0ミリ秒）初期値を復元します（アニメーションコールバックのdisplay: noneと同じ）。

注意してください、このアプローチはvisibilityを使うものより優れています。そのような場合、要素はまだページ上のスペースを占めており、必ずしも適切ではありません。

他の例については article を参照してください。

Answer 8

W3Cワーキングドラフト2013年11月19日によるとdisplayは アニメート可能なプロパティ ではない。幸い、visibilityはアニメート可能です。不透明度の遷移（ JSFiddle ）を使って遷移を連鎖させることができます。

• HTML：

  <a href="http://example.com" id="foo">Foo</a>
  <button id="hide-button">Hide</button>
  <button id="show-button">Show</button>
  

• CSS：

  #foo {
      transition-property: visibility, opacity;
      transition-duration: 0s, 1s;
  }
  
  #foo.hidden {
      opacity: 0;
      visibility: hidden;
      transition-property: opacity, visibility;
      transition-duration: 1s, 0s;
      transition-delay: 0s, 1s;
  }
  

• テスト用のJavaScript

  var foo = document.getElementById('foo');
  
  document.getElementById('hide-button').onclick = function () {
      foo.className = 'hidden';
  };
  
  document.getElementById('show-button').onclick = function () {
      foo.className = '';
  };
  

visibility: hiddenを設定せずにリンクを透明にしただけでは、クリック可能なままになります。

Answer 9

私の巧妙な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 10

編集：この例では、表示なしが適用されていません。

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

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

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

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

これが2つの例です： https://jsfiddle.net/qwnz9tqg/3/

Answer 11

今日、これを再利用していたposition: fixedモーダルでこれに遭遇しました。 display: noneを保持してからアニメーション化することはできませんでした。外観に飛び込んだだけで、z-index（負の値など）も奇妙なことをしました。

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

それから、簡単な答えがあったと思いました。出来上がり：

最初、隠しモーダル。 heightが0であることに注意してください。また、トランジションのheight宣言を確認してください... 500ms、が長い私のopacity transitionよりも。これは、出力フェードアウト遷移に影響することに注意してください。モーダルをデフォルト状態に戻します。

#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 12

これらの答えのいくつかと他の場所での提案からすると、次のものはホバーメニューに最適です（私は特にこれをブートストラップ3で使用しています）。

nav .dropdown-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 500ms, opacity 300ms;
    -webkit-transition: max-height 500ms, opacity 300ms;
}
nav .dropdown:hover .dropdown-menu {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0, opacity 300ms;
    -webkit-transition: max-height 0, opacity 300ms;
}

max-heightはheightsでは使用できないため、両方の値を指定する場合は、height:autoの代わりにtransitionを使用することもできます。 max-heightのホバー値は、メニューのheightよりも大きくする必要があります。

Answer 13

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;
}

overflow:hiddenはdisplay:noneとまったく同じように動作するため、visibleの方が優れています。

Answer 14

Guillermoから受け入れられた回答が書かれた後、2012年4月3日のCSS移行仕様により、可視性移行の動作が変更され、現在、この問題をより短い方法で解決できるディレイ：

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

通常、両方の遷移に指定される実行時間は同じである必要があります（ただし、可視性の時間をわずかに長くしても問題はありません）。実行中のバージョンについては、私のブログ http://www.taccgl.org/blog/css-transition-visibility.html#visibility-opacity を参照してください。

W.r.t.質問のタイトル "ディスプレイ上の遷移：プロパティ"およびRui Marquesからのコメントと受け入れられた回答への応答：このソリューションはケースで機能しますdisplayまたはvisibilityプロパティが使用されている場合は関係ありません（おそらくこの質問の場合のように）。 display：noneとして要素を完全に削除するのではなく、単に非表示にしますが、ドキュメントフロー内に残り、次の要素の位置に影響します。 display：noneに似た要素を完全に削除するトランジションは、高さ（他の回答とコメントで示されている）、max-height、またはmargin-top/bottomを使用して実行できますが、 高さを遷移するにはどうすればよいですか）も参照してください0;高さ：自動; CSSを使用しますか？ および私のブログ http://www.taccgl.org/blog/css_transition_display.html 。

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

Answer 15

JavaScriptは必要ありません、そしてとんでもないほど大きなmax-heightは必要ありません。代わりに、テキスト要素に最大の高さを設定し、remやemなどのフォント相対単位を使用してください。こうすることで、メニューを閉じるときの遅延や「ポップ」を回避しながら、コンテナの最大高さを大きくすることができます。

_ html _

<nav>
  <input type="checkbox" />
  <ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
  </ul>
</nav>

_ css _

nav input + ul li { // notice I set max-height on li, not ul
   max-height: 0;
}

nav input:checked + ul li {
   max-height: 3rem; // a little bigger to allow for text-wrapping - but not outrageous
}

ここで例を見てください： http://codepen.io/mindfullsilence/pen/DtzjE

Answer 16

CSSトランジションを始めたばかりの人が、displayプロパティ（block/none）を同時に変更しているとうまくいかないことがすぐにわかります。まだ言及されていない回避策の1つは、display：block/noneを引き続き使用して要素の表示/非表示を切り替えることができますが、その不透明度を0に設定してdisplay：blockでも非表示にすることです。それからフェードインするために、 "on"のような不透明度を1に設定し、不透明度の遷移を定義する別のCSSクラスを追加します。ご想像のとおり、この「on」クラスを要素に追加するにはJavaScriptを使用する必要がありますが、少なくとも実際の移行にはまだCSSを使用しています。

P.S display：blockと "on"クラスの追加の両方を実行する必要がある状況にいる場合は、setTimeoutを使用して後者を延期してください。それ以外の場合、ブラウザは両方のことを同時に起こっていると見なし、移行を無効にします。

Answer 17

opacityとposition absoluteを組み合わせることによって、私はようやく解決策を見つけました（隠されているときはスペースを占有しないようにします）。

.toggle {
  opacity: 0;
  position: absolute;
  transition: opacity 0.8s;
}

.parent:hover .toggle {
  opacity: 1;
  position: static;
}

Answer 18

私はSalmanPKが最も近い答えを持っていると思います、それは以下のCSSアニメーションでアイテムをフェードインまたはフェードアウトさせます。ただし、displayプロパティは滑らかにアニメーション化されず、不透明度のみがアニメーション化されます。

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

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

表示ブロックから非表示に移動する要素をアニメートする場合は、CSSだけで現在可能であることはわかりません。高さを取得し、CSSアニメーションを使用して高さを下げる必要があります。以下の例に示すようにCSSでもこれは可能ですが、要素に対してアニメートする必要がある正確な高さの値を知るのは難しいでしょう。

jsFiddle 例

CSS

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.Push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

JavaScript

var element = document.getElementById("element");

// Push item down
element.className = element.className + " Push-down";

Answer 19

私はこの問題に何度も遭遇しましたが、今は単に次のようにしました。

.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}

クラスblock--invisibleを追加することによって、要素全体はクリックできなくなりますが、その背後にあるすべての要素は、すべての主要ブラウザでサポートされているpointer-events:noneのためになります（no IE<11）。

Answer 20

私はそのような多くの答えを持つ質問に答えるのはほとんど悪いと感じていますが、この解決策は優れた互換性を持っており、私はまだそれを見たことがありません：

.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トリック（ "show-and-animate"と1ステップで互換性があります）を使用しますが、隠しコンテナがスペースとを使用しないようにposition: absolute; z-index: -1; pointer-events: none;の組み合わせを使用します。ユーザーの操作には応答しません。

Answer 21

単純な ：）

@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;

フェードアウトさせて、高さ0にします。また、最終状態のままになるようにフォワードを使用してください。

Answer 22

表示を使用する代わりに、必要になるまで要素を「画面外」に保存してから、その位置を目的の位置に設定して同時に変換できます。これは他の設計上の問題の全体のホストを起動しますが、ymmvです。コンテンツをスクリーンリーダーにアクセス可能にしたいため、表示を使用したくないと思うかもしれません。エージェントにはコンテンツとして表示されません。

Answer 23

これはトランジションイベントを使用して実行できます。つまり、トランジション用に2つのCSSクラスを構築します。一方はアニメーションを、もう一方は表示なしの状態を保持します。アニメーションが終了した後にそれらを切り替える？私の場合は、BTNを押して両方のクラスを削除すると、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")) {
        //im toggleing and there is already the above classe, 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 24

この問題に対する最も簡単な解決策は、CSSでdisplay:noneを自由に指定できることです。ただし、JavaScriptを使用してblock（またはその他）に変更した後、問題の要素にクラスを追加する必要もあります。それは実際には遷移をする 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>

最新の健全なブラウザでテスト済み。明らかにIE9以前では動作しません。

Answer 25

これを使うこともできます。

.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;
}

Answer 26

あなたはこれをあなたが期待する自然なやり方で動くようにすることができます - ディスプレイを使う - しかしあなたはそれを動かすためにブラウザを絞らなければなりません。内側のタグは、CSSやディメンションをさらに複雑にするので気にしないでください。そのため、JSのソリューションを次に示します。

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

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

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

隠された箱あなたはそれをクリックで移行させることができます：

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);
}

キーはdisplayプロパティを絞ることです。隠されたクラスを削除して50ミリ秒待つと、{then}追加されたクラスを介してトランジションが開始され、アニメーションが表示されずに画面に表示されるのではなく、表示されます。非表示を適用する前にアニメーションが終了するまで待つことを除いて、同様のことが反対の方向にも起こります。

注：setTimeoutの競合状態を避けるために、ここで.animate(maxWidth)を悪用しています。 setTimeoutは、あなたや他の誰かが気付かないうちにコードを見つけたときに、隠されたバグをすばやく紹介します。 .animate()は.stop()で簡単に殺すことができます。私はこれを使って、標準のfxキューに50msまたは2000msの遅延を付けています。この上に構築している他のコーダーが簡単に見つけたり解決したりできるのです。

Answer 27

オープンソースのスケルトンプロジェクト Toggle Display Animate を始めました。

https://marcnewton.github.io/Toggle-Display-Animate/ /

このスケルトンヘルパーを使うと、jQueryの表示/非表示を簡単に模倣することができますが、CSS3のトランジションアニメーションは表示されません。

これはクラスの切り替えを使用するので、表示以外にも要素に任意のcssメソッドを使用できます。none | block | table | inlineなど、および考えられる他の代替用途。

その主な設計目的は、要素の切り替え状態です。オブジェクトを非表示にすると、キーフレームを逆方向に実行したり、要素を非表示にしたりするための代替アニメーションを再生できるようになります。

私が取り組んでいるコンセプトのためのマークアップの大部分はCSSです。実際に使われるJavaScriptはほとんどありません。

ここにデモがあります： http://marcnewton.co.uk/projects/toggle-display-animate/ /

Answer 28

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

visibility CSSプロパティはテーブルアイテムに一般的に使用される値collapseを持っています。ただし、他の要素で使用すると、実質的にdisplay: hiddenと同じように 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 29

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 30

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をニースフェード効果のある表示に移行しています。