Question

我无法理解Bootstrap模态div的可见性，以及何时或为什么即使隐藏它们也显示为可见。

页面上的正常div，在模态之外，与我编写的代码完美配合。

...

我写了一些JS和CSS来说：如果.animation-element的任何元素都在窗口的视图中，那么添加.in-view，如果没有，则删除.in-view。它应该非常简单，除了模态内的div，.animation-element总是显示为具有.in-view类。

...

var $animation_elements = $('.animation-element');
var $window = $(window);

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
    (element_top_position <= window_bottom_position)) {
  $element.addClass('in-view');
} else {
  $element.removeClass('in-view');
}
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

和

.animation-element {
  opacity: 0;
}

.animation-element.in-view {
  opacity: 1;
  transition: 1s ease-in-out;
  transition-delay: 0.2s;
}

即使模式data-target的div没有显示.in-view，因为它不在屏幕视图中，因此模式中的任何div都会显示.animation-element类有班级.in-view。我已经将所有模态div放在页面的最底部，它们仍然显示相同的结果。

以下是代码笔示例：http://codepen.io/ethanethan/pen/MbbyoE

Answer 1

我认为你还应该在单击/切换模态时触发check_if_in_view（）函数。 Lucklily bootstrap的js为模态提供事件（在这里查看“events”部分：http://getbootstrap.com/javascript/#modals）所以它会是：

...
$window.on('scroll resize', check_if_in_view);
$('#myModal').on('shown.bs.modal', function (e) {
  check_if_in_view();
});
$window.trigger('scroll');

其中#myModal可以更改为.modal以适用于整个项目，并且还要注意，在此事件中，只应检查模态内部的.animation-element，因此您需要进一步更改此代码段

如何使用JQuery与Bootstrap 3模式一起制作基于滚动的动画？

1 个答案: