我在理解Bootstrap模态div的可见性以及它们何时或为何显示为可见(即使隐藏)时也遇到了麻烦。

页面上的普通div,在模态之外,可以与我编写的代码完美配合。

...

我写了一些JS和CSS说:如果窗口的视图中有任何带有.animation-element的元素,则添加.in-view,否则添加.in-view。它应该非常简单,除了具有.animation-element的模态中的div始终显示为具有.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,但模态中具有.animation-element类的div仍具有类.in-view。我已将所有模式div放在页面的最底部,它们仍然显示相同的结果。

这是一个代码笔示例:http://codepen.io/ethanethan/pen/MbbyoE

最佳答案

我认为您还应该在单击/切换模式时触发check_if_in_view()函数。 Lucklily bootstrap的js提供了模式事件(请在此处查看“事件”部分: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以适用于整个项目,并且还应注意,在此事件下,仅应检查modal内的.animation-element,因此您需要进一步更改此代码段。

关于javascript - 如何使用JQuery和Bootstrap 3模态制作基于滚动的动画?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40651653/

10-10 18:49
查看更多