我在理解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/