Aplikasi saya berkinerja buruk dengan slideDown dan slideUp jQuery. Saya ingin menggunakan CSS3 yang setara di browser yang mendukungnya.

Apakah mungkin, menggunakan transisi CSS3, untuk mengubah elemen dari display: none;menjadi display: block;saat menggeser item ke bawah atau ke atas?

Anda bisa melakukan sesuatu seperti ini:

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

Contoh - Geser dan Pudar:

Ini menggeser dan menganimasikan opasitas - tidak berdasarkan ketinggian wadah, tetapi di atas / koordinat. Lihat contoh

Contoh - Auto-height / No Javascript: Ini adalah contoh langsung, tidak membutuhkan tinggi - berhubungan dengan tinggi otomatis dan tanpa javascript.
Lihat contoh

Saya mengubah solusi Anda, agar berfungsi di semua browser modern:

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

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

inilah contoh lengkapnya http://jsfiddle.net/RHPQd/

Jadi saya telah melanjutkan dan menjawab pertanyaan saya sendiri :)

@ Jawaban True dianggap mengubah elemen ke ketinggian tertentu. Masalahnya adalah saya tidak tahu ketinggian elemen (bisa berfluktuasi).

Saya menemukan solusi lain yang menggunakan max-height sebagai transisi tetapi ini menghasilkan animasi yang sangat tersentak-sentak bagi saya.

Solusi saya di bawah ini hanya berfungsi di browser WebKit.

Meskipun bukan CSS murni, ini melibatkan transisi ketinggian, yang ditentukan oleh beberapa 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>

Lihat di JSFiddle

mengapa tidak memanfaatkan transisi css browser modern dan membuat segalanya lebih sederhana dan cepat menggunakan lebih banyak css dan lebih sedikit jquery

Ini kode untuk meluncur ke atas dan ke bawah

Ini kode untuk menggeser dari kiri ke kanan

Demikian pula kita dapat mengubah geser dari atas ke bawah atau kanan ke kiri dengan mengubah transform-origin dan transform: scaleX (0) atau transform: scaleY (0) dengan tepat.

Membuat transisi tinggi agar berfungsi bisa sedikit rumit terutama karena Anda harus mengetahui ketinggian yang akan dianimasikan. Hal ini semakin diperumit dengan padding di elemen yang akan dianimasikan.

Inilah yang saya dapatkan:

gunakan gaya seperti ini:

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

Bungkus konten Anda ke dalam wadah lain sehingga wadah yang Anda geser tidak memiliki bantalan / margin / batas:

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

Kemudian gunakan beberapa skrip (atau markup deklaratif dalam kerangka kerja yang mengikat) untuk memicu kelas CSS.

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

Contoh di sini: http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview

Ini berfungsi dengan baik untuk konten ukuran tetap. Untuk solusi yang lebih umum, Anda dapat menggunakan kode untuk mengetahui ukuran elemen saat transisi diaktifkan. Berikut ini adalah plug-in jQuery yang melakukan hal itu:

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

yang bisa dipicu seperti ini:

$ ("# Trigger"). Click (function () {

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

melawan markup seperti ini:

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

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

Saya menulis ini baru-baru ini di posting blog jika Anda tertarik dengan detail lebih lanjut:

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

Saya akan merekomendasikan menggunakan Plugin jQuery Transit yang menggunakan properti transformasi CSS3, yang berfungsi dengan baik pada perangkat seluler karena fakta bahwa sebagian besar mendukung akselerasi perangkat keras untuk memberikan tampilan dan nuansa asli itu.

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

Aight fam, setelah beberapa penelitian dan percobaan, saya pikir pendekatan terbaik adalah memiliki ketinggian benda 0px, dan membiarkannya beralih ke ketinggian yang tepat. Anda mendapatkan tinggi yang tepat dengan JavaScript. JavaScript tidak melakukan animasi, itu hanya mengubah nilai ketinggian. Periksa:

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

Setiap kali halaman memuat atau diubah ukurannya, elemen dengan kelas infoakan mendapatkan hatributnya diperbarui. Kemudian Anda dapat memiliki tombol yang memicu style="height: __"untuk menyetelnya ke hnilai yang ditetapkan sebelumnya .

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

  });
};

Inilah gaya untuk infokelas.

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

Saya menggunakan ini di salah satu proyek saya sehingga nama kelasnya spesifik. Anda dapat mengubahnya sesuka Anda.

Penataan gaya mungkin tidak didukung lintas browser. Bekerja dengan baik di krom.

Di bawah ini adalah contoh langsung untuk kode ini. Cukup klik ?ikon untuk memulai animasi

CodePen

Varian tanpa JavaScript. Hanya 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>

Untuk blok berikutnya hanya mengubah atribut ID dan FOR di html.

Anda tidak dapat dengan mudah membuat slideup slidedown dengan css3 karena itulah saya mengubah skrip JensT menjadi plugin dengan javascript fallback dan callback.

dengan cara ini jika Anda memiliki brwowser modern, Anda dapat menggunakan csstransition css3. Jika browser Anda tidak mendukungnya, gunakan slideDown slideUp kuno.

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

plugin

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

bagaimana cara menggunakannya

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

Anda dapat menemukan halaman demo di sini 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;
            } 
        }