Far funzionare le transizioni di altezza può essere un po 'complicato principalmente perché devi conoscere l'altezza per cui animare. Ciò è ulteriormente complicato dall'imbottitura nell'elemento da animare.
Ecco cosa mi è venuto in mente:
usa uno stile come questo:
.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 ;
}
Avvolgi il tuo contenuto in un altro contenitore in modo che il contenitore che stai facendo scorrere non abbia spaziatura interna / margini / bordi:
<div id="Slider" class="slideup">
<div id="Actual">
Hello World Text
</div>
</div>
Quindi utilizzare alcuni script (o markup dichiarativo nei framework di associazione) per attivare le classi CSS.
$("#Trigger").click(function () {
$("#Slider").toggleClass("slidedown slideup");
});
Esempio qui:
http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview
Funziona bene per contenuti di dimensioni fisse. Per una soluzione più generica è possibile utilizzare il codice per calcolare la dimensione dell'elemento quando la transizione è attivata. Il seguente è un plug-in jQuery che fa proprio questo:
$.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");
$el.css("max-height", "none");
var height = $el.outerHeight();
$el.css("max-height", "0");
setTimeout(function() {
$el.css({
"max-height": height
});
}, 1);
});
};
che può essere attivato in questo modo:
$ ("# Trigger"). Clic (function () {
if ($("#SlideWrapper").hasClass("height-transition-hidden"))
$("#SlideWrapper").slideDownTransition();
else
$("#SlideWrapper").slideUpTransition();
});
contro markup come questo:
<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">
<div id="Actual">
Your actual content to slide down goes here.
</div>
</div>
Esempio:
http://plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?p=preview
L'ho scritto di recente in un post sul blog se sei interessato a maggiori dettagli:
http://weblog.west-wind.com/posts/2014/Feb/22/Using-CSS-Transitions-to-SlideUp-and-SlideDown