Запуск CSS-анимации с помощью js

208

25 января 2018, 20:34

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

function openLangs() { 
  var el = document.getElementById("drop-lang"); 
  if (el.style.display == "none" || !el.style.display) { 
    el.style.display = "inline"; 
    el.classList.add("slideRight"); 
  } else { 
    el.style.display = "none"; 
    el.classList.remove("slideRight"); 
  } 
}

.slideRight { 
  animation-name: slideRight; 
  -webkit-animation-name: slideRight; 
  animation-duration: 1s; 
  -webkit-animation-duration: 1s; 
  animation-timing-function: ease-in-out; 
  -webkit-animation-timing-function: ease-in-out; 
  visibility: visible !important; 
} 
 
@keyframes slideRight { 
  0% { 
    transform: translateX(-25%); 
  } 
  100% { 
    transform: translateX(0%); 
  } 
} 
 
@-webkit-keyframes slideRight { 
  0% { 
    -webkit-transform: translateX(-25%); 
  } 
  100% { 
    -webkit-transform: translateX(0%); 
  } 
}

<div class="lang" onclick="openLangs()"> 
  <a class="dropdown-lang"> <img src="img/icons/en.png" alt=""> </a> 
</div> 
<div id="drop-lang"> 
  <a href="#"><img src="img/icons/gm.png" alt=""></a> 
  <a href="#"><img src="img/icons/rus.png" alt=""></a> 
</div>

На данный момент стиль с анимацией добавляется, но самой анимации не видно. Как можно запустить анимацию при изменении свойства display на "inline"?

Answer 1

Зачем такие сложности, если можно обойтись минимумом

var el = document.getElementById("drop-lang"); 
document.getElementsByClassName("lang")[0].addEventListener('click', 
  function() { 
    el.classList.toggle("active"); 
 
  })

#drop-lang { 
  transform: translateX(-100px); 
  transition: transform .5s; 
} 
 
#drop-lang.active { 
  transform: translateX(0); 
  transition: transform .5s; 
}

<div class="lang"> 
  <img src="http://www.qcfdesign.com/wiki/DesktopDungeons/images/a/a8/Berserker.png" alt=""> 
</div> 
<div id="drop-lang"> 
  <img src="http://www.qcfdesign.com/wiki/DesktopDungeons/images/a/a8/Berserker.png" alt=""> 
  <img src="http://www.qcfdesign.com/wiki/DesktopDungeons/images/a/a8/Berserker.png" alt=""> 
</div>

Answer 2

Опишите анимацию в отдельном классе, скажем state-played и скриптом снимайте\устанавливайте этот класс.