Javascript-форум - Показать сообщение отдельно

voraa · #2 (**permalink**) 02.12.2020, 08:30

Это то, как я понял?

<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>