web-dev-qa-db-ja.com

CSS3はjQuery slideUpおよびslideDownと同等ですか？

私のアプリケーションは、jQueryのslideDownとslideUpでパフォーマンスが低下しています。私はそれをサポートするブラウザーでCSS3に相当するものを使用したいと考えています。

CSS3トランジションを使用して、要素をdisplay: none;からdisplay: block;アイテムを上下にスライドしながら？

jquerycss3animation
74
Mike

次のようなことができます：

#youritem .fade.in {
    animation-name: fadeIn;
}

#youritem .fade.out {
    animation-name: fadeOut;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(startYposition);
    } 
    100% {
        opacity: 1;
        transform: translateY(endYposition);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(startYposition);
    } 
    100% {
        opacity: 0;
        transform: translateY(endYposition);
    }
}

例-スライドとフェード：

これは、コンテナの高さではなく、上部/座標に基づいて、不透明度をスライドさせてアニメーション化します。 例を表示

例-自動高さ/ JavaScriptなし：以下は、高さを必要としないライブサンプルです-自動高さを処理し、JavaScriptを使用しません。
例を表示

32
TNC

ソリューションを変更し、最新のすべてのブラウザーで動作するようにしました。

cssスニペット：

-webkit-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-ms-transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;

jsスニペット：

    var clone = $('#this').clone()
                .css({'position':'absolute','visibility':'hidden','height':'auto'})
                .addClass('slideClone')
                .appendTo('body');

    var newHeight = $(".slideClone").height();
    $(".slideClone").remove();
    $('#this').css('height',newHeight + 'px');

ここに完全な例があります http://jsfiddle.net/RHPQd/

14
JensT

だから私は先に進み、自分の質問に答えました:)

@Trueの答えは、要素を特定の高さに変換することでした。これの問題は、要素の高さがわからないことです（変動する可能性があります）。

周囲に最大高さを使用する他のソリューションを見つけましたが、これは非常にぎくしゃくしたアニメーションを生成しました。

以下の私のソリューションは、WebKitブラウザーでのみ機能します。

純粋にCSSではありませんが、一部のJSによって決定される高さの遷移を伴います。

$('#click-me').click(function() {
  var height = $("#this").height();
  if (height > 0) {
    $('#this').css('height', '0');
  } else {
    $("#this").css({
      'position': 'absolute',
      'visibility': 'hidden',
      'height': 'auto'
    });
    var newHeight = $("#this").height();
    $("#this").css({
      'position': 'static',
      'visibility': 'visible',
      'height': '0'
    });
    $('#this').css('height', newHeight + 'px');
  }
});
#this {
  width: 500px;
  height: 0;
  max-height: 9999px;
  overflow: hidden;
  background: #BBBBBB;
  -webkit-transition: height 1s ease-in-out;
}

#click-me {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<p id="click-me">click me</p>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
<div>always shows</div>

JSFiddleで表示

9
Mike

現代のブラウザのCSS遷移を利用して、CSSを増やしてjqueryを減らして物事をより簡単かつ高速にする理由

ここに上下にスライドするためのコードがあります

左から右にスライドするためのコードです

同様に、transform-Originとtransform：scaleX（0）またはtransform：scaleY（0）を適切に変更することにより、スライドを上から下または右から左に変更できます。

8
manas

高さの移行を機能させるには、主にアニメーション化する高さを知る必要があるため、少し注意が必要です。これは、アニメーション化する要素にパディングすることによりさらに複雑になります。

ここに私が思いついたものがあります：

次のようなスタイルを使用します。

    .slideup, .slidedown {
        max-height: 0;            
        overflow-y: hidden;
        -webkit-transition: max-height 0.8s ease-in-out;
        -moz-transition: max-height 0.8s ease-in-out;
        -o-transition: max-height 0.8s ease-in-out;
        transition: max-height 0.8s ease-in-out;
    }
    .slidedown {            
        max-height: 60px ;  // fixed width                  
    }

スライドするコンテナにパディング/マージン/境界線がないように、コンテンツを別のコンテナにラップします。

  <div id="Slider" class="slideup">
    <!-- content has to be wrapped so that the padding and
            margins don't effect the transition's height -->
    <div id="Actual">
            Hello World Text
        </div>
  </div>

次に、いくつかのスクリプト（またはバインディングフレームワークの宣言型マークアップ）を使用して、CSSクラスをトリガーします。

  $("#Trigger").click(function () {
    $("#Slider").toggleClass("slidedown slideup");
  });

ここの例： http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview

これは、固定サイズのコンテンツに対して正常に機能します。より一般的なソリューションでは、コードを使用して、遷移がアクティブになったときの要素のサイズを把握できます。以下は、まさにそれを行うjQueryプラグインです。

$.fn.slideUpTransition = function() {
    return this.each(function() {
        var $el = $(this);
        $el.css("max-height", "0");
        $el.addClass("height-transition-hidden");
    });
};

$.fn.slideDownTransition = function() {
    return this.each(function() {
        var $el = $(this);
        $el.removeClass("height-transition-hidden");

        // temporarily make visible to get the size
        $el.css("max-height", "none");
        var height = $el.outerHeight();

        // reset to 0 then animate with small delay
        $el.css("max-height", "0");

        setTimeout(function() {
            $el.css({
                "max-height": height
            });
        }, 1);
    });
};

次のようにトリガーできます。

$（ "＃Trigger"）。click（function（）{

    if ($("#SlideWrapper").hasClass("height-transition-hidden"))
        $("#SlideWrapper").slideDownTransition();
    else
        $("#SlideWrapper").slideUpTransition();
});

このようなマークアップに対して：

<style>
#Actual {
    background: silver;
    color: White;
    padding: 20px;
}

.height-transition {
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
    overflow-y: hidden;            
}
.height-transition-hidden {            
    max-height: 0;            
}
</style>
<div id="SlideWrapper" class="height-transition height-transition-hidden">
    <!-- content has to be wrapped so that the padding and
        margins don't effect the transition's height -->
    <div id="Actual">
     Your actual content to slide down goes here.
    </div>
</div>

例： http://plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?p=preview

あなたがより詳細に興味があるなら、私は最近ブログ投稿でこれを書きました：

http://weblog.west-wind.com/posts/2014/Feb/22/Using-CSS-Transitions-to-SlideUp-and-SlideDown

5
Rick Strahl

jQuery Transit Plugin を使用することをお勧めします。CSS3変換プロパティを使用します。これは、ほとんどのネイティブルックアンドフィールを提供するハードウェアアクセラレーションをサポートしているため、モバイルデバイスで最適に動作します。

JS Fiddle例

HTML：

<div class="moveMe">
    <button class="moveUp">Move Me Up</button>
    <button class="moveDown">Move Me Down</button>
    <button class="setUp">Set Me Up</button>
    <button class="setDown">Set Me Down</button>
 </div>

Javascript：

$(".moveUp").on("click", function() {
    $(".moveMe").transition({ y: '-=5' });
});

$(".moveDown").on("click", function() {
    $(".moveMe").transition({ y: '+=5' });
});

$(".setUp").on("click", function() {
    $(".moveMe").transition({ y: '0px' });
});

$(".setDown").on("click", function() {
    $(".moveMe").transition({ y: '200px' });
});
5
ROFLwTIME

ちょっとした調査と実験の後、最善のアプローチは物の高さを0pxにし、それを正確な高さに移行させることだと思います。 JavaScriptで正確な高さを取得します。 JavaScriptはアニメーションを実行せず、高さの値を変更するだけです。確認してください：

function setInfoHeight() {
  $(window).on('load resize', function() {
    $('.info').each(function () {
      var current = $(this);
      var closed = $(this).height() == 0;
      current.show().height('auto').attr('h', current.height() );
      current.height(closed ? '0' : current.height());
    });
  });

ページがロードまたはサイズ変更されるたびに、クラスinfoの要素はそのh属性を更新します。次に、ボタンを使用してstyle="height: __"をトリガーし、以前に設定したh値に設定できます。

function moreInformation() {
  $('.icon-container').click(function() {
    var info = $(this).closest('.dish-header').next('.info'); // Just the one info
    var icon = $(this).children('.info-btn'); // Select the logo

    // Stop any ongoing animation loops. Without this, you could click button 10
    // times real fast, and watch an animation of the info showing and closing
    // for a few seconds after
    icon.stop();
    info.stop();

    // Flip icon and hide/show info
    icon.toggleClass('flip');

    // Metnod 1, animation handled by JS
    // info.slideToggle('slow');

    // Method 2, animation handled by CSS, use with setInfoheight function
    info.toggleClass('active').height(icon.is('.flip') ? info.attr('h') : '0');

  });
};

infoクラスのスタイルは次のとおりです。

.info {
  display: inline-block;
  height: 0px;
  line-height: 1.5em;
  overflow: hidden;
  padding: 0 1em;
  transition: height 0.6s, padding 0.6s;
  &.active {
    border-bottom: $thin-line;
    padding: 1em;
  }
}

プロジェクトの1つでこれを使用したので、クラス名は固有です。好きなように変更できます。

スタイリングはクロスブラウザでサポートされていない場合があります。クロムで正常に動作します。

以下は、このコードの実際の例です。 ?アイコンをクリックして、アニメーションを開始します

CodePen

2
Cruz Nunez

私はJensTスクリプトをjavascriptフォールバックとコールバックを備えたプラグインに変えた理由は、css3でスライドアップスライドダウンを簡単に作成できないことです。

このように、最新のブラウザを使用している場合は、css3 csstransitionを使用できます。ブラウザがそれをサポートしていない場合は、昔ながらのslideUp slideDownを使用してください。

 /* css */
.csstransitions .mosneslide {
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
  -ms-transition: height .4s ease-in-out;
  -o-transition: height .4s ease-in-out;
  transition: height .4s ease-in-out;
  max-height: 9999px;
  overflow: hidden;
  height: 0;
}

プラグイン

(function ($) {
$.fn.mosne_slide = function (
    options) {
    // set default option values
    defaults = {
        delay: 750,
        before: function () {}, // before  callback
        after: function () {} // after callback;
    }
    // Extend default settings
    var settings = $.extend({},
        defaults, options);
    return this.each(function () {
        var $this = $(this);
        //on after
        settings.before.apply(
            $this);
        var height = $this.height();
        var width = $this.width();
        if (Modernizr.csstransitions) {
            // modern browsers
            if (height > 0) {
                $this.css(
                    'height',
                    '0')
                    .addClass(
                        "mosne_hidden"
                );
            } else {
                var clone =
                    $this.clone()
                    .css({
                        'position': 'absolute',
                        'visibility': 'hidden',
                        'height': 'auto',
                        'width': width
                    })
                    .addClass(
                        'mosne_slideClone'
                )
                    .appendTo(
                        'body'
                );
                var newHeight =
                    $(
                        ".mosne_slideClone"
                )
                    .height();
                $(
                    ".mosne_slideClone"
                )
                    .remove();
                $this.css(
                    'height',
                    newHeight +
                    'px')
                    .removeClass(
                        "mosne_hidden"
                );
            }
        } else {
            //fallback
            if ($this.is(
                ":visible"
            )) {
                $this.slideUp()
                    .addClass(
                        "mosne_hidden"
                );
            } else {
                $this.hide()
                    .slideDown()
                    .removeClass(
                        "mosne_hidden"
                );
            }
        }
        //on after
        setTimeout(function () {
            settings.after
                .apply(
                    $this
            );
        }, settings.delay);
    });
}
})(jQuery);;

それを使用する方法

/* jQuery */
$(".mosneslide").mosne_slide({
    delay:400,
    before:function(){console.log("start");},
    after:function(){console.log("done");}
});

デモページはこちらにあります http://www.mosne.it/playground/mosne_slide_up_down/

0
mosne