Блог

Главная - Вопросы по программированию - Почему моя анимация вращения работает только один раз при нажатии кнопки?

Почему моя анимация вращения работает только один раз при нажатии кнопки?

#javascript #jquery #css #bootstrap-4

#javascript #jquery #css #bootstrap-4

Вопрос:

Когда нажата кнопка отправки, мне нужно, чтобы все изображения вращались. Однако это происходит только при первом нажатии кнопки (до следующего обновления страницы). Я использовал jquery для добавления и удаления класса к изображениям при нажатии кнопки, а анимация поворота находится в моем css.

Я сократил свой код до этого, что не так? Заранее спасибо

 function diceRoll() {
  $(".dice").removeClass("rotate");
  $(".dice").addClass("rotate");
}

document.getElementById("submit").addEventListener("click", function(e) {
  e.preventDefault();

  diceRoll();

})  
 /* Images */

img {
  width: 70px;
  line-height: 0;
  margin: 0 1%;
  display: flex;
  justify-content: center;
  display: inline;
}

figure {
  display: inline-block;
  vertical-align: middle;
}

.rotate {
  animation: rotation 0.1s infinite linear;
  animation-iteration-count: 2;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}  
 <title>Diceey</title>

<!-- Bootstrap, CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="styles2.css">

<!-- Jquery Links -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
</head>

<body>

  <div class="container-fluid heading">
    <h1 id="title"> Hello there</h1>
    <h5>Press to roll dice</h5>
  </div>

  <div class="container-fluid instructions">

    <!-- Images -->
    <div class="container-fluid">

      <div class="container-of-images">
        <figure>
          <img id="img1" class="dice" src="https://image.ibb.co/nFqkvx/dice6.png">
        </figure>

        <figure>
          <img id="img2" class="dice" src="https://image.ibb.co/nFqkvx/dice6.png">
        </figure>

        <figure class="threeChoices">
          <img id="img3" class="dice" src="https://image.ibb.co/nFqkvx/dice6.png">
        </figure>

        <figure class="fourChoices">
          <img id="img4" class="dice" src="https://image.ibb.co/nFqkvx/dice6.png">
        </figure>
      </div>
    </div>

    <div class="container-fluid">

      <div class="container-of-forms">
        <a href="" id="submit" class="btn btn-info btn-lg" role="button">Go</a>
      </div>
      <script src="index2.js" charset="utf-8">
      </script>
</body>

<footer>
</footer>

Комментарии:

1. Скорее всего, это связано с удалением скрипта и добавлением класса обратно, и не дает браузеру времени на настройку.

2. Также будьте последовательны. $("#submit").on("click", diceRoll)

3. @mplungjan Вау, когда я это сделал, это работает сейчас … есть идеи, почему?

4. «однако в моем реальном коде у меня есть больше, чем diceRoll для запуска при нажатии кнопки» — мы можем использовать только то, что предусмотрено — пожалуйста, убедитесь, что вы включили все соответствующие детали, такие как это (не нужны подробности, просто это еще не все)

Ответ №1:

Вы могли бы попробовать прослушать окончание анимации и отключить кнопку перехода, когда она вращается

 function diceRoll() {
  $("a#submit").addClass("disabled")
  $(".dice").addClass("rotate");
  $(".dice").on("webkitAnimationEnd oanimationend msAnimationEnd animationend", function() {
    $("a#submit").removeClass("disabled")
    $(".dice").removeClass("rotate");
  })
}
  

 function diceRoll() {
  $("#submit").addClass("disabled")
  $(".dice").addClass("rotate");
  $(".dice").on("webkitAnimationEnd oanimationend msAnimationEnd animationend", function() {
    $("#submit").removeClass("disabled")
    $(".dice").removeClass("rotate");
  })
}

document.getElementById("submit").addEventListener("click", function(e) {
  e.preventDefault();
  diceRoll();
})  
 img {
  width: 70px;
  line-height: 0;
  margin: 0 1%;
  display: flex;
  justify-content: center;
  display: inline;
}

figure {
  display: inline-block;
  vertical-align: middle;
}

.rotate {
  animation: rotation 0.1s infinite linear;
  animation-iteration-count: 2;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}  
 <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Diceey</title>

  <!-- Bootstrap, CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="styles2.css">

  <!-- Jquery Links -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
</head>

<body>

  <div class="container-fluid heading">
    <h1 id="title"> Hello there</h1>
    <h5>Press to roll dice</h5>
  </div>

  <div class="container-fluid instructions">

    <!-- Images -->
    <div class="container-fluid">

      <div class="container-of-images">
        <figure>
          <img id="img1" class="dice" src="https://miro.medium.com/max/512/1*15_KIo9vPHULoA98NYT9jQ.png">
        </figure>

        <figure>
          <img id="img2" class="dice" src="https://miro.medium.com/max/512/1*15_KIo9vPHULoA98NYT9jQ.png">
        </figure>

        <figure class="threeChoices">
          <img id="img3" class="dice" src="https://miro.medium.com/max/512/1*15_KIo9vPHULoA98NYT9jQ.png">
        </figure>

        <figure class="fourChoices">
          <img id="img4" class="dice" src="https://miro.medium.com/max/512/1*15_KIo9vPHULoA98NYT9jQ.png">
        </figure>
      </div>
    </div>

    <div class="container-fluid">

      <div class="container-of-forms">
        <a href="" id="submit" class="btn btn-info btn-lg" role="button">Go</a>
      </div>
      <script src="index2.js" charset="utf-8">
      </script>
</body>

<footer>
</footer>



</html>

Комментарии:

1. Спасибо! Итак, я предполагаю, что если конец события не прослушивается, кнопка отправки все еще активна — в этом была проблема?

2. Кроме того, почему это так, $("a#submit") а $("#submit") нет?

3. @argonx да, это так, потому что переход требует времени, поэтому лучше прослушать его событие, чтобы избежать беспорядка. И о $("a#submit") я просто хочу указать это более четко ( a tag with id of submit ). Оставьте это $("#submit") все равно должно работать хорошо

Ответ №2:

Я чувствую, что это можно сделать с помощью старого доброго css-способа!

Просто внесите эти изменения в свой:

файл css

 img {
  width: 70px;
  line-height: 0;
   margin: 0 1%;
   display: flex;
   justify-content: center;
   display: inline;
}
 

figure {
  display: inline-block;
  vertical-align: middle;
}

.rotate {
  animation: rotation 0.1s infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(360deg)
  }
  100% {
    transform: rotate(0deg);
  }
}

js файл

 let a = document.querySelectorAll('.dice')
function diceRoll() {
  a.forEach(elem => {
    elem.classList.add("rotate");
    setTimeout(()=>{
      elem.classList.remove("rotate")
    }, 200)
  })

}

document.getElementById("submit").addEventListener("click", function(e) {
  e.preventDefault();
  diceRoll();

})

Комментарии:

1. Эй, @argonx, я поместил ее в codepen

2. Приятно это слышать! Небольшой совет, поддержите любой пост, который дает вам правильный результат!