jQuery Waypoints Refresh with CSS Transition

Question

Я использую путевые точки для переключения класса, который создает переход CSS на основе смещения. Это переход css уменьшает высоту элемента. Я попытался использовать функцию обновления, чтобы пересчитать DOM после прохождения каждой путевой точки, но я не уверен, что я делаю это правильно, или, может быть, я немного ограничен здесь.

Вы можете посмотреть на сайте здесь: http://dev.rostylesalon.com/

jQuery('#aboutwrap').waypoint(function() { 
    jQuery('#aboutwrap .section-header').toggleClass('header-animate'); 
$.waypoints('refresh'); 
}, { offset: 300 }); 

jQuery('#servicewrap').waypoint(function() { 
    jQuery('#servicewrap .section-header').toggleClass('header-animate'); 
$.waypoints('refresh'); 
}, { offset: 300 }); 

jQuery('#contactwrap').waypoint(function() { 
    jQuery('#contactwrap .section-header').toggleClass('header-animate'); 
$.waypoints('refresh'); 
}, { offset: 300 }); 

Каждая секция заголовка выше, следует переключить класс, который увеличивает/уменьшает его высоту. Я думал, что «обновление» будет пересчитывать DOM для размещения для этого, но это не тот случай. И точка/точка привязки заканчивается выше, чем предполагалось. Если вы перейдете от одного раздела к другому, нет проблем. Но если вы пропустите раздел, используя навигацию, заголовок раздела окажется немного выше вершины окна просмотра.

Answer 1

Вы находитесь на правильном пути при вызове refresh после переключения класса. Вы действительно хотите пересчитать триггерные точки, которые он предоставляет.

Проблема в том, что переход CSS происходит асинхронно. Вы переключаете класс, и ваш переход начинается, в то время как ваш JavaScript уже перешел к вызову refresh, но ваш переход только начался. Вы хотите подождать, пока переход не будет завершен, пока вы не вызовете обновление.

Переходы CSS, помимо их свойств CSS, также дают нам событие JavaScript, которое называется transitionend. Вот как вы можете использовать его (непроверенный) на своей странице.

Во-первых, я хотел бы реорганизовать существующий код немного, чтобы было легче рассуждать. Все ваши путевые точки делают то же самое, и ваши разделы имеют общую разметку, которую мы можем использовать. Таким образом, мы можем сделать этот путевой вызов только один раз и позволить Waypoints прокручивать сами элементы. И this в Точек обратного вызова относится к самому HTML-элемента, поэтому мы будем использовать, что:

jQuery('.section-wrapper').waypoint(function() { 
    jQuery(this).find('.section-header').toggleClass('header-animate'); 
}, { offset: 300 }); 

Хорошо, теперь давайте добавим transitionend обработчик:

jQuery('.section-wrapper').waypoint(function() { 
    jQuery(this).find('.section-header').toggleClass('header-animate'); 
}, { offset: 300 }); 

jQuery('.section-header').on('webkitTransitionEnd transitionend', function() { 
    jQuery.waypoints('refresh'); 
}); 

Это должно получить работа выполнена.