jQuery Deferred - Как подождать или задержать завершение функции .animate перед выполнением .done ()? - PullRequest
Новая
       40

jQuery Deferred - Как подождать или задержать завершение функции .animate перед выполнением .done ()?

0 голосов
/ 10 октября 2019

У меня есть ряд отложенных действий, которые выполняются как часть $ .when () .done () 

        $.when(
          $activeHighlight.removeClass('active'),
          $nextHighlight.addClass('active'),
          $nextHighlight.fadeIn(250),
          scrollToActiveHighlightConfirmationSlide(0),
        ).done(
          lazyloadHighlightConfirmationHighlights.load($nextHighlightImage[0])
        );

Это прекрасно работает! Но всякий раз, когда я пытаюсь предварять эту серию событий функцией, вызывающей анимацию, она никогда не «ждет» завершения анимации, прежде чем продолжить.

Вот как я пытался структурировать ее: 

        function slideLeft() {
          $activeHighlightImage.animate(
            {
              left: -$activeHighlightImage.width(),
              opacity: "0",
            }, 200);
        }

        $.when(
          slideLeft()
        ).done(
          $activeHighlight.hide(),
          $.when(
            $activeHighlight.removeClass('active'),
            $nextHighlight.addClass('active'),
            $nextHighlight.fadeIn(250),
            scrollToActiveHighlightConfirmationSlide(0),
          ).done(
            lazyloadHighlightConfirmationHighlights.load($nextHighlightImage[0])
          ),
        )

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

В идеале это будет выглядеть примерно так ...

  1. slideLeft, который занимает 200 мс
  2. (подождите 200 мс, пока вышеприведенная анимация завершится)
  3. $ activeHighlight.hide ()
  4. Немедленно подготовьтесь к отображению нового выделения, выполнив функции .when ()
  5. Затем, в .done (), вызовите загрузчик lazyloader для загрузкив изображении нового выделения.

Возникновение чего-то вроде числа 2 - вот где у меня сейчас проблемы ...

Есть идеи?

1 Ответ

0 голосов
/ 11 октября 2019

Из других замечательных разговоров, которые я прочитал, у меня сложилось впечатление, что обещания jQuery не очень хорошо справляются с задержками или ожиданиями, которые я ищу. И, честно говоря, решения, которые они выдвинули, были немного над моей головой в данный момент.

Тогда я понял ...

То, что я получил, не было таким уж обещаниемзадержка, а скорее способ как-то ПОКАЗАТЬ анимацию «slideLeft ()».

И вот, когда меня это поразило! Вместо того чтобы пытаться использовать превосходную функцию janu .animate (), я создал отдельные классы изображений с различными трехмерными матрицами преобразования.

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

Вот scss, который я использовал 

        -webkit-transition: all 400ms ease;
        -moz-transition: all 400ms ease;
        -o-transition: all 400ms ease;
        transition: all 400ms ease;

        &.out-right {
          transform: matrix3d(
            1,0,0,0,
            0,1,0,0,
            0,0,1,0,
            800,0,0,1
          );
        }

        &.active {
          transform: matrix3d(
            1,0,0,0,
            0,1,0,0,
            0,0,1,0,
            0,0,0,1
          );
        }

        &.out-left {
          transform: matrix3d(
            1,0,0,0,
            0,1,0,0,
            0,0,1,0,
            -800,0,0,1
          );
        }

Вот как я изменил оригиналдо начальной структуры класса для изображений. Это выглядело примерно так 

 <div class="highlight">
    <%= image_tag tag.images.first.file_url(:speck),
      class: "active",
      ...
    %>
  </div>

  <% tag.images.drop(1).each do |image| %>
    <div class="highlight">
      <%= image_tag image.file_url(:speck),
        class: "out-right",
        ...
      %>
    </div>
  <% end %>

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

PS: я не показывал, как я «сбрасываю» состояния классов изображений при циклическом их просмотре, но если вам нужно это опубликовать, не стесняйтесь запросить его, и яподелюсь с чем придумала.

...