レスポンシブなメディアクエリに「フェードアウト/フェードイン」を追加

Question

「フェードイン/フェードアウト」のエフェクトを、CSS3メディアを使用してレスポンシブウェブサイトで表示または非表示にする要素に追加する方法が不思議ですクエリlinearのトランジションの使い方を理解しましたが、実際にはフェードを使いたいと思います。

Answer 1

CSSでこれを行うには、transitionsを使用する必要があります。 CSSトランジションで要素をフェードイン/フェードアウトさせる方法は、opacityを0に設定してからopacityをアニメーション化することですが、CSSだけではできません時間を適切なイベント）：

transition CSSクラスは transitionルールセットだろう

$(window).on('resize', function() { 
    if ($(this).width() <= 480) { 
     //do code for less than 480px wide 
     $('#some-element').css('opacity', 0).addClass('transition').css('opacity', 1); 
     setTimeout(function() { 
      $('#some-element').removeClass('transition'); 
     }, 500); 
    } 
}).trigger('resize'); 

：あなたはサンプルコードが必要

.transition { 
    -webkit-transition : opacity 0.5s linear; 
     -moz-transition : opacity 0.5s linear; 
     -ms-transition : opacity 0.5s linear; 
     -o-transition : opacity 0.5s linear; 
      transition : opacity 0.5s linear; 
}