Meine Anwendung arbeitet schlecht mit jQuerys slideDown und slideUp. Ich möchte ein CSS3-Äquivalent in Browsern verwenden, die es unterstützen.

Ist es möglich, mithilfe von CSS3-Übergängen ein Element von display: none;nach zu ändern , display: block;während das Element nach unten oder oben verschoben wird?

Sie könnten so etwas tun:

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

Beispiel - Slide and Fade:

Dadurch wird die Deckkraft verschoben und animiert - nicht basierend auf der Höhe des Containers, sondern auf der Oberseite / Koordinate. Beispiel anzeigen

Beispiel - Automatische Höhe / kein Javascript: Hier ist ein Live-Beispiel, das keine Höhe benötigt - mit automatischer Höhe und ohne Javascript.
Beispiel anzeigen

Ich habe Ihre Lösung so geändert, dass sie in allen modernen Browsern funktioniert:

CSS-Snippet:

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

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

Hier ist das vollständige Beispiel http://jsfiddle.net/RHPQd/

Also habe ich meine eigene Frage beantwortet :)

In der Antwort von @ True wurde die Umwandlung eines Elements in eine bestimmte Höhe betrachtet. Das Problem dabei ist, dass ich die Höhe des Elements nicht kenne (es kann schwanken).

Ich habe andere Lösungen gefunden, bei denen die maximale Höhe als Übergang verwendet wurde, aber dies führte zu einer sehr ruckartigen Animation für mich.

Meine unten stehende Lösung funktioniert nur in WebKit-Browsern.

Obwohl es sich nicht um reines CSS handelt, wird die Höhe geändert, was von einigen JS bestimmt wird.

$('#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>

Ansicht auf JSFiddle

Warum nicht den CSS-Übergang moderner Browser nutzen und die Dinge einfacher und schneller machen, indem Sie mehr CSS und weniger JQuery verwenden?

Hier ist der Code zum Auf- und Abgleiten

Hier ist der Code zum Verschieben von links nach rechts

In ähnlicher Weise können wir das Gleiten von oben nach unten oder von rechts nach links ändern, indem wir den Transformationsursprung und die Transformation: scaleX (0) oder die Transformation: scaleY (0) entsprechend ändern.

Höhenübergänge zum Laufen zu bringen kann etwas schwierig sein, vor allem, weil Sie die Höhe kennen müssen, für die Sie animieren möchten. Dies wird durch Auffüllen des zu animierenden Elements weiter erschwert.

Folgendes habe ich mir ausgedacht:

Verwenden Sie einen Stil wie diesen:

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

Wickeln Sie Ihren Inhalt in einen anderen Container, sodass der Container, den Sie verschieben, keine Polster / Ränder / Ränder aufweist:

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

Verwenden Sie dann ein Skript (oder ein deklaratives Markup in Bindungsframeworks), um die CSS-Klassen auszulösen.

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

Beispiel hier: http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview

Dies funktioniert gut für Inhalte mit fester Größe. Für eine allgemeinere Lösung können Sie Code verwenden, um die Größe des Elements zu ermitteln, wenn der Übergang aktiviert ist. Das Folgende ist ein jQuery-Plug-In, das genau das tut:

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

was so ausgelöst werden kann:

$ ("# Trigger"). Klicken Sie auf (function () {

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

gegen Markup wie folgt:

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

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

Ich habe dies kürzlich in einem Blog-Beitrag geschrieben, wenn Sie an weiteren Details interessiert sind:

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

Ich würde empfehlen, das jQuery Transit Plugin zu verwenden, das die CSS3-Transformationseigenschaft verwendet, die auf Mobilgeräten hervorragend funktioniert, da die meisten die Hardwarebeschleunigung unterstützen, um das native Erscheinungsbild zu erzielen.

JS Fiddle Beispiel

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, nach einigen Recherchen und Experimenten denke ich, dass der beste Ansatz darin besteht, die Höhe des Dings auf zu halten 0pxund es auf eine exakte Höhe übergehen zu lassen. Mit JavaScript erhalten Sie die genaue Höhe. Das JavaScript führt keine Animation durch, sondern ändert nur den Höhenwert. Prüfen Sie:

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

Immer wenn die Seite geladen oder in der Größe geändert wird, infowird das hAttribut des Elements mit Klasse aktualisiert. Dann könnte eine Taste den auslösen style="height: __", um ihn auf den zuvor eingestellten hWert einzustellen .

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

  });
};

Hier ist das Styling für die infoKlasse.

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

Ich habe dies in einem meiner Projekte verwendet, damit die Klassennamen spezifisch sind. Sie können sie ändern, wie Sie möchten.

Das Styling wird möglicherweise nicht browserübergreifend unterstützt. Funktioniert gut in Chrom.

Unten finden Sie das Live-Beispiel für diesen Code. Klicken Sie einfach auf das ?Symbol, um die Animation zu starten

CodePen

Variante ohne JavaScript. Nur 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>

Ändern Sie für den nächsten Block nur die ID- und FOR-Attribute in HTML.

Sie können mit CSS3 nicht einfach ein Slideup erstellen, weshalb ich JensT-Skript in ein Plugin mit Javascript-Fallback und -Rückruf verwandelt habe.

Auf diese Weise können Sie mit einem modernen Browser die CSS3-Csstransition verwenden. Wenn Ihr Browser dies nicht unterstützt, verwenden Sie das altmodische 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;
}

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

wie man es benutzt

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

Eine Demoseite finden Sie hier 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;
            } 
        }