Question

我编写了一个扩展Bootstrap旋转木马的功能，可以在滑块滑动时自动缩小或延伸滑块的高度。我希望能够有平滑过渡的不同高度的幻灯片。我的解决方案偶尔会起作用，但有时幻灯片的幻灯片在幻灯片完成之前就会变得空白，导致它看起来像一个非常尴尬的剪辑。我不确定究竟是什么导致了这一点，但它似乎与＆＃34;滑动＆＃34;事件发射得比它应该的更早。通过slid事件处理函数的断点，我可以在滑块完成之前很好地捕获事件。有谁知道可能导致这种情况的原因？

$.fn.carouselAutoHeight = function (options) {

    var maxHeight = options.height;

    $(this).carousel({
        wrap: false
    }).carousel("pause");

    $(this).on('slide.bs.carousel', function(e){
        var $newDiv = $(e.relatedTarget)
        var $previousDiv = $(".item.slider.active", this);
        $newDiv.css({
            position:   'absolute',
            visibility: 'hidden',
            display:    'block'
        });
        var targetHeight = $newDiv.height();

        $newDiv.attr("style", "")
        function finishAnimate(){
            $newDiv.css("position", "relative");
            $(this).css("height", "");
        }
        $previousDiv.stop().animate({
            height: targetHeight + "px"
        }, "slow", finishAnimate);
        $(this).unbind('slid.bs.carousel').on('slid.bs.carousel', function(e){
            var x = 0;
            $(e.target).find(".item:not(.active)").attr("style","");
        });
    });

}

Answer 1

这困扰了我几个月，我终于明白了。事实证明，当活动项目完成转换时，会触发'slid'事件，如下所示

$active.one($.support.transition.end, function (e) {
    $next.removeClass([type, direction].join(' ')).addClass('active')
    $active.removeClass(['active', direction].join(' '))
    that.sliding = false
    setTimeout(function () { that.$element.trigger('slid.bs.carousel') }, 0)
}).emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000)

表示如果任何其他转换发生并在滑动项目中结束，则会导致幻灯片提前终止。现在，据我所知，我没有这样的转变（我从未写过）。

然而，事实证明，文本类型的输入字段具有在chrome（可能是其他浏览器）中进行的本机转换，这使得它在聚焦时会发出蓝光。一旦我的幻灯片事件开始，输入就会模糊，从而导致过渡从蓝色渐变。一旦完成转换，就会触发我的旋转木马立即完成过早滑动

应该注意的是，bootstrap并不是设计为在旋转木马内部有这样的交互式内容，我只是违反了规则。但值得注意的是，这种原生过渡可能会在您的文档中“无形地”发生。

Bootstrap“滑动”事件过早发射

1 个答案: