CSS3 ключевой кадр анимации при щелчке (с addClass). Как перезапустить анимацию CSS3 с добавлением класса css?

Question

У меня проблема. Я использую Bounce.js для создания приятных анимаций меню (с некоторыми классными эффектами). Bounce.js с использованием анимации ключевых кадров css, которые могут быть проблематичными для перезапуска. Я получил меню, и когда я нажимаю кнопку, и когда добавлен класс .show, он должен запускать анимацию шоу. Но когда я снова нажимаю эту кнопку, скрыть класс должен быть добавлен с помощью скрытой анимации (это просто обратная версия предыдущей анимации).

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

Answer 1

Вы можете сделать это серватом.

Один из способов - инициировать повторный поток элемента перед добавлением к нему класса анимации.

element.offsetWidth = element.offsetWidth; 

Например (ваниль JS):

if (element2.classList.contains('show')) { 
     element2.classList.remove("show"); 
     //restarting css3 keyframe animation 
     **element2.offsetWidth = element2.offsetWidth;** 
     element2.classList.add("hide"); 
    }else{ 
     element2.classList.remove("hide"); 
     //restarting css3 keyframe animation 
     **element2.offsetWidth = element2.offsetWidth;** 
     element2.classList.add("show"); 
    } 

JQuery версия:

if(settingPopup.hasClass('show')){ 
     settingPopup.removeClass('show'); 
     //line below is a fix to restart css3 keyframe animation 
     //settingPopup.outerWidth(settingPopup.outerWidth) 
     settingPopup.outerWidth(settingPopup.outerWidth).addClass('hide'); 
    }else{ 
     settingPopup.removeClass('hide'); 
     //line below is a fix to restart css3 keyframe animation 
     //settingPopup.outerWidth(settingPopup.outerWidth) 
     settingPopup.outerWidth(settingPopup.outerWidth).addClass('show'); 
    } 

И здесь работает скрипку для него: https://jsfiddle.net/zpawpvke/2/

основе: https://css-tricks.com/restart-css-animation/