Uygulamam jQuery'nin slideDown ve slideUp ile kötü performans gösteriyor. Destekleyen tarayıcılarda bir CSS3 eşdeğeri kullanmak istiyorum.

Ondan bir öğe değiştirmek için, CSS3 geçişleri kullanarak, mümkün mü display: none;için display: block;aşağı veya yukarı öğeyi kaydırırken?

Bunun gibi bir şey yapabilirsiniz:

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

Örnek - Kaydır ve Söndür:

Bu, opaklığı kaydırır ve hareketlendirir - kabın yüksekliğine değil, üst / koordinata göre. Örneği görüntüleyin

Örnek - Otomatik yükseklik / Javascript Yok: Burada, yüksekliğe ihtiyaç duymayan canlı bir örnek var - otomatik yükseklik ile ilgilenen ve javascript içermeyen.
Örneği görüntüleyin

Çözümünüzü tüm modern tarayıcılarda çalışacak şekilde değiştirdim:

css pasajı:

-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 snippet'i:

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

işte tam örnek http://jsfiddle.net/RHPQd/

Bu yüzden devam ettim ve kendi sorumu cevapladım :)

@ True'nun cevabı, bir öğeyi belirli bir yüksekliğe dönüştürmekle ilgiliydi. Bununla ilgili sorun, elementin yüksekliğini bilmememdir (dalgalanabilir).

Maksimum yüksekliği geçiş olarak kullanan başka çözümler buldum ama bu benim için çok sarsıntılı bir animasyon üretti.

Aşağıdaki çözümüm yalnızca WebKit tarayıcılarında çalışıyor.

Tamamen CSS olmasa da, bazı JS tarafından belirlenen yüksekliğin geçişini içerir.

$('#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'da görüntüle

neden modern tarayıcıların css geçişinden yararlanmayalım ve daha fazla css ve daha az jquery kullanarak işleri daha basit ve hızlı hale getirmeyin

İşte yukarı ve aşağı kaydırma kodu

İşte soldan sağa kaydırma kodu

Benzer şekilde, transform-origin ve transform: scaleX (0) veya transform: scaleY (0) 'ı uygun şekilde değiştirerek kaymayı yukarıdan aşağıya veya sağdan sola değiştirebiliriz.

Çalışmak için yükseklik geçişlerini almak biraz zor olabilir çünkü animasyon yapacağınız yüksekliği bilmeniz gerekir. Bu, canlandırılacak öğenin doldurulmasıyla daha da karmaşık hale gelir.

İşte bulduğum şey:

bunun gibi bir stil kullanın:

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

İçeriğinizi başka bir kaba sarın, böylece kaydırdığınız kapta dolgu / kenar boşlukları / kenarlıklar bulunmaz:

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

Ardından, CSS sınıflarını tetiklemek için bazı komut dosyası (veya bağlama çerçevelerinde bildirim temelli işaretleme) kullanın.

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

Buradaki örnek: http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview

Bu, sabit boyutlu içerik için iyi çalışır. Daha genel bir çözüm için, geçiş etkinleştirildiğinde öğenin boyutunu anlamak için kodu kullanabilirsiniz. Aşağıdaki, tam da bunu yapan bir jQuery eklentisidir:

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

şu şekilde tetiklenebilir:

$ ("# Tetikleyici"). Tıklayın (function () {

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

bunun gibi işaretlemeye karşı:

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

Örnek: http://plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?p=preview

Daha fazla ayrıntıyla ilgileniyorsanız, bunu geçenlerde bir blog gönderisinde yazdım:

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

Bu yerel görünümü ve hissi vermek için çoğu donanım hızlandırmayı desteklediği için mobil cihazlarda harika çalışan CSS3 dönüştürme özelliğini kullanan jQuery Transit Eklentisini kullanmanızı tavsiye ederim .

JS Fiddle Örneği

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

Pekala, biraz araştırma ve deney yaptıktan sonra, bence en iyi yaklaşım nesnenin yüksekliğine sahip olmak ve 0pxkesin bir yüksekliğe geçişine izin vermek. JavaScript ile tam yüksekliği elde edersiniz. JavaScript canlandırmayı yapmıyor, sadece yükseklik değerini değiştiriyor. Kontrol et:

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

Sayfa her yüklendiğinde veya yeniden boyutlandırıldığında, sınıfa sahip öğe info, hözniteliği güncellenir. Daha sonra style="height: __", önceden ayarlanan hdeğere ayarlamak için bir düğmeyi tetikleyebilirsiniz .

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

  });
};

İşte infosınıfın stili .

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

Bunu projelerimden birinde kullandım, bu yüzden sınıf adları belirli. Onları istediğiniz gibi değiştirebilirsiniz.

Stil, tarayıcılar arası desteklenmeyebilir. Kromda iyi çalışıyor.

Aşağıda bu kod için canlı örnek bulunmaktadır. ?Animasyonu başlatmak için simgeye tıklamanız yeterli

CodePen

JavaScript içermeyen varyant. Yalnızca CSS.

CSS:

.toggle_block {
    border: 1px solid #ccc;
    text-align: left;
    background: #fff;
    overflow: hidden;
}
.toggle_block .toggle_flag {
    display: block;
    width: 1px;
    height: 1px;
    position: absolute;
    z-index: 0;
    left: -1000px;
}
.toggle_block .toggle_key {
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
    -webkit-transition: all 300ms ease;
       -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
         -o-transition: all 300ms ease;
            transition: all 300ms ease;
}
.toggle_block .content {
    padding: 0 10px;
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 300ms ease;
       -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
         -o-transition: all 300ms ease;
            transition: all 300ms ease;
}
.toggle_block .content .toggle_close {
    cursor: pointer;
    font-size: 12px;
}
.toggle_block .toggle_flag:checked ~ .toggle_key {
    background: #dfd;
}
.toggle_block .toggle_flag:checked ~ .content {
    max-height: 1000px;
    padding: 10px 10px;
}

HTML:

<div class="toggle_block">
    <input type="checkbox" id="toggle_1" class="toggle_flag">
    <label for="toggle_1" class="toggle_key">clicker</label>
    <div class="content">
        Text 1<br>
        Text 2<br>
        <label for="toggle_1" class="toggle_close">close</label>
    </div>
</div>

Sonraki blok için sadece html'deki ID ve FOR özelliklerini değiştirin.

css3 ile kolay bir şekilde aşağı doğru kayan bir slayt yapamazsınız, bu yüzden JensT komut dosyasını javascript geri dönüşü ve geri çağrısı olan bir eklentiye dönüştürdüm.

bu şekilde modern bir tarayıcınız varsa css3 csstransition'ı kullanabilirsiniz. Tarayıcınız bunu desteklemiyorsa, eski moda slideUp slideDown kullanın.

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

eklenti

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

bu nasıl kullanılır

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

burada bir demo sayfası bulabilirsiniz http://www.mosne.it/playground/mosne_slide_up_down/

    try this for slide up slide down with animation 
give your **height

        @keyframes slide_up{
            from{
                min-height: 0;
                height: 0px;
                opacity: 0;
            }
            to{
                height: 560px;
                opacity: 1;
            }
        }

        @keyframes slide_down{
            from{
                height: 560px;
                opacity: 1;
            }
            to{
                min-height: 0;
                height: 0px;
                opacity: 0;
            } 
        }