Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.12.2020, 07:45
Аспирант
Отправить личное сообщение для maxim1978 Посмотреть профиль Найти все сообщения от maxim1978
 
Регистрация: 07.05.2019
Сообщений: 38

Как сохранить состояние анимации ?
Имеется кнопка ...

При клике срабатывает две анимации ..первая раскачивает кнопку влево вправо

Вторая вращает иконку .fas

Так вот вопрос в том как сохранить это вращение таким способом что бы иконка не возвращалась назад но по прежнему что бы при каждом клике срабатывали эти две анимации ?

Вот здесь код : https://codepen.io/topicstarter/pen/qBaObJG
Ответить с цитированием
  #2 (permalink)  
Старый 02.12.2020, 08:30
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,693

Это то, как я понял?
<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>

Последний раз редактировалось voraa, 02.12.2020 в 08:38.
Ответить с цитированием
  #3 (permalink)  
Старый 02.12.2020, 08:32
Аспирант
Отправить личное сообщение для maxim1978 Посмотреть профиль Найти все сообщения от maxim1978
 
Регистрация: 07.05.2019
Сообщений: 38

Спасибо - я тоже сам смог сделать - но по другому https://codepen.io/topicstarter/pen/qBaObJG

Последний раз редактировалось maxim1978, 02.12.2020 в 08:39.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как удалить дом элемент только после завершения css анимации? Piterom Общие вопросы Javascript 1 02.09.2019 08:45
как сохранить состояние клонированного элемента? Ramundo Элементы интерфейса 3 20.08.2018 16:50
Где и как сохранить выбранный пользователем размер шрифта ivi_ivi_ivi Элементы интерфейса 1 03.06.2015 00:00
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25