Почему добавление анимации ключевых кадров к элементу через AddClass запускает всю функцию в Javascript? - PullRequest
Новая
       35

Почему добавление анимации ключевых кадров к элементу через AddClass запускает всю функцию в Javascript?

0 голосов
/ 24 июня 2019

Проблема:

Когда анимация добавляется через класс (elm.addClass) вместо простого изменения классов каждого элемента, jQuery / JS запускает всю функцию для каждого элемента с изменением класса.

Пытались многочисленные сценарии, чтобы понять, почему происходит такое поведение (например, vanilla JS, jQuery, несколько функций и т. Д.), В результате можно легко заставить работать ползунок (фактически закомментированный код, который работает), но почему Код не ведет себя так, как предписано в документах? Это не должно вызывать функцию для каждого изменения класса - почти пузырящийся тип эффекта (или это может быть как-то возможно? Если так, то почему?)

Простое решение:

Конечно, можно избежать такого поведения, управляя анимацией через JS вместо CSS (elm.fadeOut), но это не объясняет, почему JS ведет себя так, как будто у него есть ошибка.

Резюме:

Почему при добавлении анимации добавляется функция запуска класса (или эффект пузырьков) для каждого изменяемого элемента? Каждый элемент должен анимироваться без повторного запуска функции. 

let imgnx = 0
function fadeImg() {
  if (imgnx < imgSrc.length) {
    $('#ctnr').append(`<img class='slides show' src=${imgSrc[imgnx]} alt='slide ${imgnx +1}'>`)
    $(`.show:eq(${imgnx})`).on('animationend', function() {
      imgnx = imgnx + 1
      fadeImg()
    })
  } else {
    console.log(`All slides displayed', 'image index is: ${imgnx}`);
    $(".slides").removeClass("show").addClass("hide");
    $(".hide").last().on('animationend', function () {
      // $(".slides").remove(); imgnx = 0; fadeImg();
      $('#ctnr').fadeOut('slow').fadeIn('slow')
    })

    console.log('Class removed - class show removed, index is: ' + imgnx)
  }
}

Проверьте полный код по адресу: https://playcode.io/351331?tabs=script.js,preview,console

1 Ответ

0 голосов
/ 02 июля 2019

Почему добавление анимации ключевых кадров к элементу с помощью AddClass запускает всю функцию> В Javascript?

Ответ на этот вопрос определяется структурой кода.

Во-первыхНа всякий случай, если кто-то не уверен, добавление анимации ключевых кадров CSS к API или блоку кода по сути не вызывает повторного запуска функции JavaScript.Хотя он может быть спроектирован так, чтобы делать это [в сочетании с дополнительным кодом], если это желательно, его органический дизайн не предназначен для таких целей.В этом конкретном случае, когда добавление CSS-анимации через добавление класса, по-видимому, вызывает ее собственную функцию, сама анимация не вызывает функцию [или имитирует вызов функции], а скорее это неожиданное поведение является результатом неполного кода.

Ошибка кода

Наблюдая за кодом в действии, мы можем легко увидеть непреднамеренное поведение, которое приводит к срабатыванию различных блоков кода, когда этого не требуется.После дальнейшей проверки экзаменаторы отметят конкретный блок кода, связанный с этим поведением.Если мы сосредоточимся на этом блоке кода, мы обнаружим, что EventListener был включен, но никогда не выключался (в чистом виде JS он был добавлен, но никогда не удалялся).Вот в чем проблема.Поскольку EventListener никогда не был выключен, он все еще ожидает завершения анимации.Когда к прослушиваемому элементу добавляются дополнительные анимации (через класс или любой другой метод), EventListener запускается так, как должен, и запускается обработчик, реализуя любой код, который ему дан для запуска.Это приводит к странному поведению, которое вызывает функцию.

Решение

Как только код проблемы найден, решение становится очевидным.Просто отключите EventListener в соответствующем месте (несколько вариантов), и приложение будет работать без нареканий.

Рекомендуемый пример кода 

else { /* Try code below */
// $('.show').off('animationend')
console.log(`All slides displayed', 'image index is: ${imgnx}`);
$(".slides").removeClass("show").addClass("hide");
/* Try code here */ 
// $('.show').off('animationend')
$(".hide").last().on('animationend', function () {
  $(".slides").remove(); imgnx = 0; fadeImg();
  $('#ctnr').fadeOut('slow').fadeIn('slow')
})

Заключение

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

Но, что более важно, это упражнение служит для демонстрации ценности удаления или отключения EventListener.

Спасибо.

...