Animierte Höhenänderung am Bootstrap-Karussell (v2.3.2)

Question

Ich versuche das Bootstrap-Karussell zu verwenden, um Inhalte zu verarbeiten, die nicht die gleiche Höhe haben. Die Höhen unterscheiden sich je nach Browserbreite, und unter dem Karussell befindet sich Inhalt. Ich möchte CSS verwenden, um die Höhenänderung zwischen den Folien zu animieren. Mit etwas Hilfe von einem Freund habe ich fast das funktioniert in FireFox (die erste Folie springt, der Rest animiert), aber ein offensichtlicher Fehler ist mit der gleitenden Animation in Chrome passiert.

Jede Eingabe wäre toll, auch wenn Sie denken, dass ich die Höhenanimation auf eine ganz andere Art und Weise behandeln sollte, lassen Sie es mich wissen!

Hier ist die JS und CSS, die ich Materie denken, aber das Ganze ist auf JS Fiddle: http://jsfiddle.net/tkDCr/

JS

$('#myCarousel').carousel({ 
    interval: false 
}); 

$('#myCarousel').bind('slid', function(e) { 
    console.log('slid',e); 
}); 

$('#myCarousel').bind('slide', function(e) { 
    console.log('slide',e); 
    var next_h = $(e.relatedTarget).outerHeight(); 
    console.log(next_h); 
    $('.carousel').css('height', next_h); 
}); 

durch die Linien 12 Kommentierung und 13 des JavaScript Sie kann sehen, dass der Fehler eindeutig dadurch verursacht wird, dass man die Variable next_h den Daten von '$ (e.relatedTarget) .outerHeight();' zuweist. Selbst wenn die Variable nicht verwendet wird, unterbricht sie immer noch die Animation. Auskommentieren 11,12 und 13 zeigt Ihnen, wie das Karussell normal funktioniert.

CSS

.carousel { 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
    background: lightgoldenrodyellow; 
    -webkit-transition: height .5s ease; 
    -moz-transition: height .5s ease; 
    -ms-transition: height .5s ease; 
    -o-transition: height .5s ease; 
    transition: height .5s ease; 
} 

Vielen Dank im Voraus.

Answer 1

Sie können, um das Problem zu bekommen, indem Sie den Anruf zu outerHeight Verzögerung() durch einen kurzen Timeout:

$('#myCarousel').bind('slide', function(e) { 
    setTimeout(function() { 
     var next_h = $(e.relatedTarget).outerHeight(); 
     $('.carousel').css('height', next_h); 
    }, 10); 
}); 

Auch Sie wollen wahrscheinlich die Höhe des .carousel auf etwas in der CSS setzen, da sonst die Der erste Übergang beginnt in der Höhe 0 und fällt von oben nach unten.

ich Ihre Geige hier aktualisiert: http://jsfiddle.net/tkDCr/3/

Answer 2

// animate do the same - timeout is not needed 

$('#myCarousel').carousel(); 
$('#myCarousel').bind('slide', function(e) { 
     $('#myCarousel').animate({height: $(e.relatedTarget).outerHeight()}); 
});   

// After using animate, there is no need for transition in css (or height)