css - 表示 - transition opacity 効かない




ディスプレイ上のトランジション:プロパティ (20)

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

現時点では、CSS3トランジションは 'display'プロパティは適用されないように見えます 。つまり、 display: noneからdisplay: noneへの遷移は一切できませんdisplay: block (または任意の組み合わせ)。

誰かが上のレベルのメニュー項目の上に乗るとき、誰かが上記の例からの「フェードイン」への第2層メニューのための方法を考えることができますか?

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

私も高さを使用してみましたが、それはただ悲惨に失敗しました。

JavaScriptを使用してこれを達成することは自明であることも認識していますが、私は自分自身にCSSだけで対処したいと思っていました。

すべてと何か提案は大歓迎です。


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プロパティのベンダープレフィックスを忘れないでください)

詳細はこの記事にあります


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クラスが追加されると、 heightopacity両方がアニメーションを遅らせることなく(0ms)アニメーションを開始しますが、 heightは0msでアニメーションを完成heightせます( display: blockと同等)。

  2. visibleクラスが削除されると、 opacityはアニメーション(0ms遅延、400ms持続時間)を開始し、高さは400ms待ち、瞬間(0ms)は初期値を復元します(アニメーションコールバックではdisplay: noneに相当)。

この方法は、 visibilityを使用する方法よりも優れています。 そのような場合、要素はまだページ上のスペースを占めており、必ずしも適切ではありません。

より多くの例については、このarticleを参照してarticle


javascriptは不要で、膨大な最大高さが必要です。 代わりに、テキスト要素に最大高さを設定し、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 : http://codepen.io/mindfullsilence/pen/DtzjE


「ディスプレイ」が変更された場合、トランジションが無効になる理由は、実際にディスプレイが表示するものが原因であると考えられます。 おそらく滑らかにアニメーション化される可能性のあるもの変更されませ

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

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

「表示」は単なる別の視覚的な属性ではありません。 ブロック、インライン、インラインブロック、テーブル、テーブル行、テーブルセル、リストアイテムなど、要素のレンダリングモード全体を設定します。 それらのそれぞれは非常に異なるレイアウト効果を持ち、それらをアニメーション化またはスムーズに遷移させる合理的な方法はありません(「ブロック」から「インライン」へのスムーズな移行を想像してみてください)。

これは、表示が変更された場合にトランジションが無効になる理由です(変更が「なし」になっても、「なし」は単にインビジビリティではなく、レンダリングを全く意味しない独自の要素レンダリングモードです)



overflow:hidden変更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:hiddendisplay:noneまったく同じように動作しdisplay:none


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

コード例: - (あなたのメニューにそれを適用することができます) Demo

スタイルシートに次の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;
}

これはトランジションイベントで行うことができます。そのため、トランジションの2つのCSSクラスを作成します.1つはアニメーションを他のものに保持し、ディスプレイなしの状態を保持します。 アニメーションが終了した後に切り替えますか? 私の場合、私は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>


これらの答えのいくつかを参考にして、他のところでいくつかの提案を考えてみましょう。以下はホバーメニューに適しています(私はこれをブートストラップ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;
}

heightから両方の値を指定した場合は、 max-height代わりにheightを使用することもできます.transitではheight:autoは許可されません。 max-heightのホバー値は、メニューのheightよりも大きくなければならない可能性があります。


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

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

クラスを設定するために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良いフェード効果で表示に移行しています。


ディスプレイを使用する代わりに、必要になるまで要素をオフスクリーンで保存し、その位置を望む場所に設定して同時に変換することができます。 しかし、これは、他の設計問題の全体のホストをもたらすので、ymmv。 とにかくディスプレイを使用したくない場合は、コンテンツがスクリーンリーダーにアクセスできるようにしたいと考えています。ほとんどの場合、可視性のためにルールに従います。つまり、目に見えないようにする必要がある場合は、エージェントにコンテンツとして表示されません。


私のすっきりした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;
}

これまでのところ、それは動作します!


私はSalmanPKが最も近い答えを持っていると考えています。それは次のCSSアニメーションを使ってアイテムを出し入れしたり消したりします。 ただし、表示プロパティはスムーズにアニメーション化されず、不透明度のみがアニメートされます。

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

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

表示ブロックから移動する要素をアニメーション化してnoneを表示する場合は、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";

私はこの問題を何回も経験しています。

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

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

クラスblock--invisible追加すると、すべての要素がクリック可能にならず、その背後にあるすべての要素は、すべての主要なブラウザ(IE <11)でサポートされているpointer-events:noneためになりpointer-events:none


私は多くの答えで質問に答えるのが悪いと感じていますが、このソリューションは優れた互換性を持っており、まだ見ていません。

.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 trick(あるステップでは "show-and-animate"と互換性があります)を使用しますが、 position: absolute; z-index: -1; pointer-events: none; position: absolute; z-index: -1; pointer-events: none; 隠しコンテナがスペース取ら ず、ユーザーのやりとりに応答 しないことを確認します


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

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

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

そして最も重要なのはアニメーションが終了した後の最後のフレームをアニメーション塗りつぶしモードで保持することです:

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

ここに2つの例があります: https://jsfiddle.net/qwnz9tqg/3/ : https://jsfiddle.net/qwnz9tqg/3/


これは、遷移タイミング関数を使用して扱うことができるstep-endstep-start

例:https://jsfiddle.net/y72h8Lky/ : 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>


単にcssの可視性を使用することができますdisplay:none / blockの代わりに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;
}

私はToggle Display Animateというオープンソースのスケルトンプロジェクトを開始しました

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

このスケルトンヘルパーを使用すると、jQueryの表示/非表示を簡単に模倣できますが、CSS3のトランジションアニメーションのイン/アウトが可能です。

これはクラストグルを使用するので、display:none | block | table | inlineなどの要素以外にも、必要なCSSメソッドを使うことができます。

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

私が取り組んでいるコンセプトのマークアップのほとんどはCSSです。実際に使用されるjavascriptはほとんどありません。

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







css-transitions