Как сохранить состояние анимации ?
Имеется кнопка ...
При клике срабатывает две анимации ..первая раскачивает кнопку влево вправо Вторая вращает иконку .fas Так вот вопрос в том как сохранить это вращение таким способом что бы иконка не возвращалась назад но по прежнему что бы при каждом клике срабатывали эти две анимации ? Вот здесь код : https://codepen.io/topicstarter/pen/qBaObJG |
Это то, как я понял?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <style> .button { display: inline-block; padding: 0 20px; border-radius: 50px; background: orange; box-shadow: 0 6px 1px #da8b3e; cursor: pointer; font-family: sans-serif; user-select: none; } .fas { background: blue; padding: 22px 20px; border-radius: 50%; background: #fff; color: orange; /* transition: 0.34s linear; Убрал */ } .fase { /* Добавил */ transition: 0.34s linear; } .pulse { animation: pulse 0.2s linear infinite; } .pulse .fas { display: inline-block; } .effect { transform: rotate(360deg); } @keyframes pulse { 0% { transform: rotate(-2deg); } 100% { transform: rotate(2deg); } } .button span, .button .fas { user-select: none; } </style> <body> <div class="button"> <p> <span>Вызвать мастера</span> <i class="fas fa-broom"></i> </p> </div> <script> document.querySelector(".button").onclick = handle; function handle() { this.classList.add("pulse"); // Важен порядок добавлени классов document.querySelector(".fas").classList.add("fase"); // Добавил document.querySelector(".fas").classList.add("effect"); pulseOut(); effectOut() // Добавил } function pulseOut() { setTimeout(function () { document.querySelector(".button").classList.remove("pulse"); }, 200); } function effectOut() { // Добавил setTimeout(function () { // Важен порядок снятия классов document.querySelector(".fas").classList.remove("fase"); document.querySelector(".fas").classList.remove("effect"); }, 340); } </script> </body> |
Спасибо - я тоже сам смог сделать - но по другому https://codepen.io/topicstarter/pen/qBaObJG
|
Часовой пояс GMT +3, время: 20:00. |