Как выполнить код после сторонней анимации слайдов?

Предыстория: я использую materialize JS для создания складных элементов div. При щелчке элемента div с классом складного заголовка происходит анимация скольжения вниз по родственному элементу div с классом складного тела, показывая содержимое сворачиваемого тела.

Что я пытаюсь сделать, так это то, что при нажатии на сворачиваемый заголовок браузер должен прокрутить до верхней части этого div, чтобы содержимое было полностью видно пользователю. Я использовал событие щелчка, которое отлично работает на первом складном элементе. Но затем, если у вас есть открытый складной элемент, и вы нажимаете на другой, чтобы открыть его, он не прокручивается до верхней части щелкнутого div должным образом (он будет прокручиваться до середины тела или намного выше вершины div ).

JS Fiddle функциональности по клику: https://jsfiddle.net/f83dct8f/4/

Я могу выполнить то, что хочу, отредактировав сам Materialize JS. Вот как выглядит строка до моего редактирования:

object.siblings('.collapsible-body').stop(true, false).slideDown({
  duration: 350,
  easing: "easeOutQuart",
  queue: false,
  complete: function() {
    $(this).css('height', '');
  }
});

Я добавляю следующее к полной части приведенного выше утверждения, чтобы выполнить то, что я ищу:

$('body').animate({scrollTop: $('.collapsible-header.active').offset().top },'slow');

Вопрос: я не хочу редактировать сторонний код Materialize, чтобы выполнить то, что мне нужно, поэтому мне нужно найти способ реализовать код анимации тела после завершения слайда без редактирования Materialize. анимация. Я знаю, что должен быть способ сделать это?

Я пробовал очереди событий на складном корпусе, что казалось многообещающим, но печать тестовой консоли выполнялась во время анимации. Смотри ниже. Если бы кто-то мог указать мне правильное направление, что еще я мог бы попробовать, я был бы очень признателен.

$('.collapsible-header.active')
.siblings('.collapsible-body').slideDown().queue(function(){    

console.log('DONE');

});

javascript materialize
person Anthony    schedule 13.06.2017    source источник
comment
Не могли бы вы поставить jsFiddle с вашим сценарием? Немного сложно сказать, что происходит, только по тексту. Кроме того, пробовали ли вы обещания сохранить выполнение в правильном порядке?   -  person Anselm    schedule 13.06.2017
comment
Я не пробовал обещания, но я обязательно изучу их больше. Вот JSFiddle моего сценария (с ошибкой в ​​​​коде клика, чтобы вы могли понять, почему была необходима модификация анимации): jsfiddle.net/f83dct8f/4   -  person Anthony    schedule 13.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны иметь возможность использовать опцию onOpen при инициализации вашего .collapsible. Передайте функцию, которая будет выполняться при открытии аккордеона. Функция получает элемент в качестве аргумента.

$(document).ready(function() {
    $('.collapsible').collapsible({
        onOpen: function(el) {
            $('body').animate({scrollTop: el.offset().top },'slow');
        }
    });
});
person Mark Rabey    schedule 13.06.2017
comment
О, я даже не знал, что это вариант. Я попробую сейчас. - person Anthony; 13.06.2017
comment
Это не сработало, к сожалению. При открытии складного ничего не происходило, а в консоли ошибок не было. Тем не менее, спасибо за вашу идею! - person Anthony; 13.06.2017
comment
Я сделал Codepen, который работает нормально. Какую версию Materialize вы используете? codepen.io/MarkRabey/pen/eRzQoK - person Mark Rabey; 13.06.2017
comment
Прошу прощения, я использовал более старую версию. Я обновил материализацию и выполнил код, но если вы откроете другой складной элемент, не закрывая другой, он не прокрутится до верхней части только что открытого складного элемента (пример: откройте «первый», затем откройте «второй»). Это идеальная демонстрация моей проблемы. Я думаю, что нашел способ обойти это, используя onClose, все еще играя с ним. - person Anthony; 13.06.2017