5

display: noneクラスに基づいたいくつかの要素の小さなメニューを備えたタイル張りの壁を作成しようとしています。私の CSS には、動作しない原因fadeInとなっている CSS トランジションがありfadeOutます。時間を追加すると、要素が消えるまでにそれだけの時間がかかりますが、実際のフェードはありません。

CSS:

.block:not(.noTransition), .block a img, #main_side p, #main_content, #menu_container{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

jQuery を使用した JavaScript:

$(document).ready(function(){
    $('.button').not("#all").click(function(){
        var theId = $(this).attr('id');
        $('.block').not('.'+theId).addClass("noTransition");
        $('.block').not('.'+theId).fadeOut('slow', function(){
            $('.block').not('.'+theId).addClass("covered");
            $('.block').not('.'+theId).removeClass("noTransition");

        });
        $('.'+theId).addClass("noTransition");
        $('.'+theId).fadeIn('slow',function(){
            $('.'+theId).removeClass("covered");
            $('.'+theId).removeClass("noTransition");    
        });
        getScreenSize();
    });
    $("#all").click(function(){
        $('.block').removeClass("covered");
        $('.block').show();
    });
    getScreenSize();
});

CSS からトランジションを削除すると、フェードは機能しますが、要素が表示/非表示になった後もトランジションを維持して要素を再配置したいと考えています。

4

3 に答える 3

4

これに対する最もクリーンな修正は、フェードしたい要素の周りに余分な要素を配置することだと思います. たとえば、この要素をフェードしようとしている場合:

<div id="fade"></div>

html を次のようにします。

 <div id="fade-parent">
      <div id="fade"></div>
 </div>

そして、親をフェードするだけです：

 $('#fade-parent').fadeIn();

そして、醜い修正は必要ありません。

于 2015-01-12T16:55:32.080 に答える
3

私は通常、ミリムースが提案することを行います：

$('#cboxClose').removeClass('transEnabl').fadeIn(500, function() {
  $(this).addClass('transEnabl'); 
});

transEnablは次のようなものです。

.transEnabl {
  transition: all 0.3s linear;
}

それは地獄のように醜いですが、うまくいきます。この問題は、css トランジションが不透明度の実行に時間を与えているために発生します。

于 2013-10-30T06:26:02.513 に答える
0

Hector の解決策がうまくいかない場合のために、さらに厄介な解決策を示します。(ここでは、JQuery の呼び出しをまとめて削除します)

フェードアウトの例:

$('#test').css('opacity', 0);
window.setTimeout(function() {
     $('#test').remove();
}, $('#test').css('transition-duration').replace('s','')*1000);

基本的に、CSS トランジションに依存してトランジションを実行し、CSS で定義されたトランジションの期間を JS で待機するだけです。

于 2014-12-16T21:22:43.073 に答える