Как реализовать анимацию блока переключения языка?

Question

[lazy_mind]

В правом верхнем углу сайта есть блочок для переключения языка. Нужно сделать так, чтобы после загрузки страницы он висел секунд 10, а после уезжал вправо за viewport. И оставалась торчать только маленькая часть с "<" для его раскрытия и перехода на другой язык. На лендинге всего два языка, так что меню не нужно. Как реализовать это ? Хочется pure css реализацию. Очень приветствуются примеры кода.

<div class="langswitch">
    <a href="/"><b>RUS</b></a>
</div>

div.langswitch {
    display: block;
    text-align: center;
    border: none;
    border-radius: 4px;
    padding: 5px 5px;
    background: #0b77ce;
    position: fixed;
    right: 30px;
    top: 30px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

div.langswitch a {
    display: block;
    height: 100%;
    width: 100%;
    color: #fff;
    text-decoration: none;
}

Comments

[Simkav]

Вешаете обработчик на загрузку страницы, ставите таймаут на 10сек и скрываете его, в чем сложность? Или вы хотите делать это на css без js?

[lazy_mind]

Без JS. Проект мой, единичный. Я не верстальщик, не разработчик. Это не моя основная деятельность. В JS, увы, толком не могу. Да, и нужно чуть сложнее, чем скрыть. Должно плавно уехать, оставив лишь кусочек для раскрытия.

[Дима]

lazy_mind, в CSS можно выставить задержку, не используя таймаут из JS. Но если именно клик нужен, то без JS не обойтись. Можно реализовать полностью на CSS если заменить клик на наведение мышкой (hover)

Answer 1

[v3shin]

// элементу присвойте id="langswitch"

// таймаут на 10 сек
let langswitchTimeout = setTimeout(() => {
    document.querySelector('#langswitch').classList.add('langswitch__hidden');
}, 10000);

// при наведении курсора - отменить скрытие
document.querySelector('#langswitch').addEventListener('mouseover', function () {
    if (langswitchTimeout) clearTimeout(langswitchTimeout);
});

// скрыть/показать по клику на .langswitch__toggler
document.querySelector('#langswitch .langswitch__toggler').addEventListener('click', function (e) {
    e.target.closest('.langswitch').classList.toggle('.langswitch__hidden');
});

Теперь элемент будет скрываться/отображаться с помощью класса langswitch__hidden. А с css разберетесь сами.