Показать сообщение отдельно
  #35 (permalink)  
Старый 12.03.2019, 12:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

анимация по клику

<button id="animation" class="anim">abc</button>

<style>

#animation {
    all: unset;
    position: relative;
    font-size: 300%;
}

#animation::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background: red;
    left: 0;
    top: 0;
}
#animation.anim::before{
   animation: animation 1s;
}

@keyframes animation {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

</style>

<script>

document.addEventListener("click", event => {
    var target = event.target;
    target.classList.remove("anim");
    document.documentElement.clientWidth;
    target.classList.add("anim");
});

</script>
Ответить с цитированием