Wie scroll-basierte Animationen mit JQuery arbeiten mit Bootstrap 3 Modals?

Question

Ich habe Probleme, die Sichtbarkeit der Bootstrap Modal Divs zu verstehen und wann oder warum sie als sichtbar angezeigt werden, auch wenn sie ausgeblendet sind.

Normale Divs auf der Seite, außerhalb des Modal, funktionieren perfekt mit dem Code, den ich geschrieben habe.

...

Ich schrieb einige JS und CSS zu sagen: wenn ein Element mit .animation-element in der Ansicht des Fensters ist, dann .in-view hinzufügen, wenn nicht, entfernen .in-view. Es sollte ziemlich einfach sein, und es ist, außer den divs innerhalb des modalen die .animation-element IMMER zeigen, als, die Klasse .in-view zu haben.

...

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'); 

und

.animation-element { 
    opacity: 0; 
} 

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

Auch wenn das div mit dem data-target für die modale nicht .in-view nicht zeigen, weil sie aus dem Bildschirm Ansicht ist, jede div innerhalb des modalen mit Die Klasse .animation-element hat die Klasse .in-view. Ich habe alle Modal Divs ganz unten auf der Seite platziert und sie zeigen immer noch das gleiche Ergebnis.

ist hier ein Code Stift Beispiel: http://codepen.io/ethanethan/pen/MbbyoE

Answer 1

Ich glaube, Sie auch Ihre check_if_in_view() Funktion, wenn modal geklickt wird ausgelöst werden soll/umgeschaltet. Lucklily Bootstrap js bietet Veranstaltungen für Modalverben (check „events“ Abschnitt hier: http://getbootstrap.com/javascript/#modals) So wäre es:

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

wo #myModal geändert werden könnten, um .modal für ganze Projekt zu arbeiten und sich auch bewusst sein, dass auf Dieses Ereignis nur .animation-element, das in Modal ist, sollte überprüft werden, also müssten Sie dieses Stück Code weiter ändern.