动画上引导的旋转木马（V2.3.2）高度变化 [英] Animate height change on Bootstrap's Carousel (v2.3.2)

问题描述

我试图用引导的传送带处理的内容是不一样的高度。的高度将异基于所述浏览器的宽度，且有转盘下面的内容。我想用CSS来制作动画幻灯片之间的高度变化。随着从朋友一些帮助我几乎都在FireFox这个工作（第一张幻灯片跳，其余的动画），但一个明显的错误与Chrome的滑动动画发生。

I'm attempting to use Bootstrap's Carousel to handle content that isn't the same height. The heights will differ based on the browsers width, and there is content below the carousel. I'd like to use CSS to animate the height change between slides. With some help from a friend I almost have this working in FireFox (the first slide jumps, the rest animate) but an obvious bug is happening with the sliding animation in Chrome.

任何投入将是巨大的，即使你认为我应该处理的高度动画完全不同的方式，请让我知道！

Any input would be great, even if you think I should handle the height animation in a completely different way, please let me know!

下面是JS和CSS，我认为此事，但整个事情是JS小提琴：的http：//的jsfiddle .NET / tkDCr /

Here is the JS and CSS that I think matter, but the whole thing is on 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);
});

通过注释掉行JavaScript代码12和13，你可以看到错误显然是受到来自数据分配变量next_h造成'$（e.relatedTarget）.outerHeight（）;。即使不使用可变它仍然打破了动画。注释掉11,12，和13，会告诉你如何传送带正常工作。

By commenting out lines 12 and 13 of the JavaScript you can see that the bug is clearly being caused by assigning the variable next_h with the data from '$(e.relatedTarget).outerHeight();'. Even if the variable isn't used it still breaks the animation. Commenting out 11,12, and 13, will show you how the carousel functions normally.

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

感谢您提前。

推荐答案

您可以通过一个短超时延迟调用outerHeight（）得到解决该问题：

You can get around the problem by delaying the call to outerHeight() by a short timeout:

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

另外，你可能想.carousel的高度设置在CSS的东西，否则第一次转型将开始在0高度，使得它从顶部回落。

Also, you probably want to set the height of .carousel to something in the css, otherwise the first transition will begin at height 0, making it drop from the top.

我在这里更新你的提琴： http://jsfiddle.net/tkDCr/3/

I updated your fiddle here: http://jsfiddle.net/tkDCr/3/

这篇关于动画上引导的旋转木马（V2.3.2）高度变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！