Лучшее решение для HTML-элемента слайд справа с преобразованием CSS?

Question

У меня есть боковой стержень с фиксированной шириной, который скользит справа, а затем сбрасывается при увольнении.

Что я делаю, это изменение отображения боковой панели для блокировки и добавление класса анимации при щелчке пользователя.

Я создал ключевой кадр, чтобы переместить его вправо в .3s, но если я не использую функцию javascript, чтобы установить отображение обратно на none (после 300 миллисекунд), он просто будет висит на правом краю экрана. Это работает, но кажется взломанным, есть ли лучший способ сделать это?

Jsfiddle здесь: https://jsfiddle.net/wLL468jj/1/

@-webkit-keyframes slideRight { 
    0% { 
     -webkit-transform: translateX(-100%); 
    } 
    100%{ 
     -webkit-transform: translateX(0%); 
    } 
} 

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

$("#popup").addClass('animate-right'); 
setTimeout(function(){ popup.style.display = "none" }, 300); 

Answer 1

Одним из способов может быть зацепить в animationend случае, пожары, когда CSS анимация завершена (Reference).

Это событие не является стандартным для всех браузеров, поэтому вы можете использовать Modernizr для получения правильного имени события в зависимости от браузера. Что-то вроде этого:

var animEndEventNames = { 
     'WebkitAnimation': 'webkitAnimationEnd', 
     'OAnimation': 'oAnimationEnd', 
     'msAnimation': 'MSAnimationEnd', 
     'animation': 'animationend' 
    }, 
    // animation end event name 
    animEndEventName = animEndEventNames[Modernizr.prefixed('animation')]; 

Теперь вы можете использовать переменную animEndEventName и добавить прослушиватель для этого события. Что-то вроде этого, может быть:

$("#popup").on(animEndEventName, function() { 
     if (!$(this).hasClass('animate-right')) 
      $(this).hide(); 
    }); 

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