CSS увядает с JS обратного вызова, чтобы установить отображение CSS на завершение прерывания анимации

Question

редактирование: JSFiddle согласно запросу: https://jsfiddle.net/5anz0kgt/1/

Edit 2: Кажется, прерывание анимации на самом деле связано с порядком элементов ... Если новый слой banenr находится поверх старого, анимация будет гладкой. Если новый баннер находится ниже, анимация кажется изменчивой. Новый вопрос поэтому становится причиной, и как я могу это исправить?

В настоящее время я заканчиваю небольшой баннер, и у меня возникают проблемы с анимацией.

Первоначально, я просто имел следующие функции, контролирующие видимость баннера и анимации (который работал):

function fadeOut(el){ 
    el.style.transition = "opacity 0.5s linear 0s"; 
    el.style.opacity = 0; 
} 

function fadeIn(el){ 
    el.style.transition = "opacity 0.5s linear 0s"; 
    el.style.opacity = 1; 
} 

Но я быстро заметил, что это (конечно) сделаны кнопки unclickable на баннеры из-за элемента укладки ,

Поэтому я решил установить отображение: нет на невидимых слоях баннера. Для выцветания, я просто добавил

el.style.display = ""; 

но гаснуть мне нужно страховать CSS анимация была завершена, прежде чем я смог скрыть слой. Поэтому я добавил (любезность http://davidwalsh.name/css-animation-callback):

var transitionEvent = whichTransitionEvent(el); 
    transitionEvent && el.addEventListener(transitionEvent, function() { 
     el.style.display = "none"; 
    }); 

к концу функции Затухание(). Сейчас проблема заключается в том, что переход сейчас очень крут (в большинстве случаев, похоже, работает небольшое подмножество времени).

Оставляя только код отображения в fadeIn(), указывает на изменение fadeOut() как проблему. Наблюдая за firebug, я вижу, что изменения дисплея вступают в игру только после завершения анимации непрозрачности.

Как я могу гарантировать, что мой код дисплея не прерывает анимацию, или, альтернативно, как еще я могу решить проблему стекирования элементов?

Answer 1

ОК, поэтому я хорошо посмотрел на ваш код. Я создал исправление для проблемы перехода, установив z-index в функции fadeOut/fadeIn, чтобы гарантировать, что правильный элемент будет виден сверху, независимо от того, будет ли он уложен.

Кроме того, есть еще одна ошибка. Цикл анимации продолжается независимо от пользовательского ввода, поэтому взаимодействие пользователя и автоматический цикл борьбы друг с другом, чтобы обойти это, вы можете использовать clearInterval для остановки функции setInterval (в частности, цикл анимации в этом случае).

Вот jsfiddle демонстрирует оба выше https://jsfiddle.net/Lmtpw6yq/3/ Обратите внимание, что я добавить еще одну функцию select_banner, которая называется OnClick вместо activate_banner так, чтобы петля анимация может быть прервана:

// stores ID of current animation loop setInterval so can interrupt 
var animationTick; 

function select_banner(banner_id) { 
    if (animationTick) { 
     // stop animation loop 
     window.clearInterval(animationTick); 
    } 
    activate_banner(banner_id); 
    animation_loop(); 
} 

animationTick установлен на идентификатор текущего setInterval тик в функции петли анимации путем вызова setInterval следующим образом:

function animation_loop() { 
    animationTick = setInterval(function(){ 
     ... 
    }, 3000); 
} 

Последнее замечание является в то время как петли. Они работают, но ужасно неэффективны, во-первых, вы многократно используете getElementById, чтобы найти те же элементы, которые заставляют ваш js пересекать дом снова и снова неоправданно. Также ваше условие для прерывания циклов while (т.поиск идентификатора, который не существует) заставляет js проверять идентификатор буквально на каждом узле документа, который не идеален.

Поскольку количество баннеров не изменяется, было бы лучше найти все баннеры один раз и сохранить ссылки на них в массиве в начале, а затем использовать для циклов для цикла по массиву вместо циклов while.