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

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

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%); } }

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

Ответ

Зачем такие сложности, если можно обойтись минимумом
var el = document.getElementById("drop-lang"); document.getElementsByClassName("lang")[0].addEventListener('click', function() { el.classList.toggle("active"); }) #drop-lang { transform: translateX(-1000px); transition: transform .5s; } #drop-lang.active { transform: translateX(0); transition: transform .5s; }