Good day. Implemented language switching, as shown in the pictures. It is necessary to add smooth animation to the appearance of hidden languages ​​when clicked. Language switching

enter image description here

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>

At the moment, the animation style is added, but the animation itself is not visible. How can I start the animation when the display property changes to "inline"?

    2 answers 2

    Why such difficulties, if you can do a minimum

     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; } 
     <div class="lang"> <img width="50" height="35" src="https://avatars.mds.yandex.net/get-pdb/38069/cfb53a44-9ec5-4958-8682-3b51a23324c0/s1200" alt=""> </div> <div id="drop-lang"> <img width="265" height="200" src="https://avatars.mds.yandex.net/get-pdb/38069/cfb53a44-9ec5-4958-8682-3b51a23324c0/s1200" alt=""> <img width="265" height="200" src="https://avatars.mds.yandex.net/get-pdb/38069/cfb53a44-9ec5-4958-8682-3b51a23324c0/s1200" alt=""> </div>

    • Thank you, this is closer than my attempts) But in the initial state, the languages ​​should be hidden, so I tried to change the display property. Is there any literate option to hide them? cdn1.savepice.ru/uploads/2018/1/25/… - Alyona
    • @ Alena, display:none; transition display:none; transition does not work, so you could not get it out smoothly - Air
    • In your example, they are hiding behind the scope, somehow you can hide them in another way? I attached comments to the screen in the past, they have to “leave” from under the active language, that is, they must somehow be invisible from the beginning - Alena
    • Everything, thought of overflow: hidden) - Alyona
    • one
      ))))) was glad to help - Air

    Describe the animation in a separate class, say state-played and remove / install this class using a script.

    • Look at the script, because there now is written, how do you suggest? - Alena