Небольшая проблема с простой программой для подбрасывания монет в javascript - PullRequest
Новая
       43

Небольшая проблема с простой программой для подбрасывания монет в javascript

0 голосов
/ 03 мая 2020

Я новичок в javascript программировании, и мне не ясно, как обрабатывается поток выполнения. Я использовал анимацию из «Анимации. css», чтобы создать программу для подбрасывания монеты. Проблема в том, что когда я go заставляю javascript добавить класс для анимации, он не запускается, и console.log выводит мне, что ни один класс не был добавлен. Можете ли вы помочь мне и заставить меня понять, почему? Спасибо заранее! ^^

Мой код здесь: 

//variabili globali
//let clickNumber=0;

//HTML to JS
coinContainer = document.querySelector('.coin-container');
coin = document.querySelector('#coin');

//Events
coin.addEventListener('click',flipCoin);

//Funzioni
function flipCoin(event) {
    console.log(event.target);
    let head = "https://qph.fs.quoracdn.net/main-qimg-57e97e36918b359f28e86b8cbf567436.webp";
    let tail = "https://qph.fs.quoracdn.net/main-qimg-9c81a54813716fccd8e3608ab2f51dcf";
    scelta=Math.floor(Math.random() * 2);
    if(scelta===0){
        event.target.setAttribute('class','animated flip');
        event.target.setAttribute('src',head);
        console.log(event.target);
        //wait a lil bit
        for(let i=0;i>1000000000;i++){
            //
        }
        event.target.setAttribute('class','');
        console.log(event.target);
    }
    else{
        event.target.setAttribute('class','animated flip');
        event.target.setAttribute('src',tail);
        console.log(event.target);
        //wait a lil bit
        for(let i=0;i>1000000000;i++){
        //
        }
        event.target.setAttribute('class','');
        console.log(event.target);
    }
    //clickNumber++;
}
/* ANIMATE.CSS */
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  
  .animated.infinite {
    animation-iteration-count: infinite;
  }
  
  .animated.delay-1s {
    animation-delay: 1s;
  }
  
  .animated.delay-2s {
    animation-delay: 2s;
  }
  
  .animated.delay-3s {
    animation-delay: 3s;
  }
  
  .animated.delay-4s {
    animation-delay: 4s;
  }
  
  .animated.delay-5s {
    animation-delay: 5s;
  }
  
  .animated.fast {
    animation-duration: 800ms;
  }
  
  .animated.faster {
    animation-duration: 500ms;
  }
  
  .animated.slow {
    animation-duration: 2s;
  }
  
  .animated.slower {
    animation-duration: 3s;
  }
  
  @media (print), (prefers-reduced-motion: reduce) {
    .animated {
      animation-duration: 1ms !important;
      transition-duration: 1ms !important;
      animation-iteration-count: 1 !important; 
    }
  }

  /* END ANIMATE CSS */

  /* FLIP.CSS */
  @keyframes flip {
    from {
      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
      animation-timing-function: ease-out;
    }
  
    40% {
      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -190deg);
      animation-timing-function: ease-out;
    }
  
    50% {
      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -170deg);
      animation-timing-function: ease-in;
    }
  
    80% {
      transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
        rotate3d(0, 1, 0, 0deg);
      animation-timing-function: ease-in;
    }
  
    to {
      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
      animation-timing-function: ease-in;
    }
  }
  
  .animated.flip {
    backface-visibility: visible;
    animation-name: flip;
  }
  /* END FLIP CSS */

  /* MY STYLE */

  body{
      background: #555555;
  }

  #coin{
      width: 21.5rem;
      height: 21.5rem;
  }

  .coin-container{
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      margin-top:15vh;
  }

  /* END MY STYLE */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="moneta.js" defer></script>
    <title>Document</title>
</head>
<body>

    <div class="coin-container">
        <img src="https://qph.fs.quoracdn.net/main-qimg-57e97e36918b359f28e86b8cbf567436.webp" id="coin">
    </div>
   
    
</body>
</html>

Ответы [ 2 ]

1 голос
/ 03 мая 2020

Удалите класс перед добавлением его для запуска анимации.
Чтобы принудительно сбросить анимацию, я добавил element.offsetWidth для принудительного перекомпоновки. 

//variabili globali
//let clickNumber=0;

//HTML to JS
coinContainer = document.querySelector('.coin-container');
coin = document.querySelector('#coin');

//Events
coin.addEventListener('click',flipCoin);

//Funzioni
function flipCoin(event) {
    console.log(event.target);
    let head = "https://qph.fs.quoracdn.net/main-qimg-57e97e36918b359f28e86b8cbf567436.webp";
    let tail = "https://qph.fs.quoracdn.net/main-qimg-9c81a54813716fccd8e3608ab2f51dcf";
    scelta=Math.floor(Math.random() * 2);
    if(scelta===0){
        event.target.setAttribute('src',head);
        
        event.target.className='';
        event.target.offsetWidth;
        event.target.className='animated flip';
    }
    else{
        event.target.setAttribute('src',tail);
        event.target.className='';
        event.target.offsetWidth;
        event.target.className='animated flip';
    }
    //clickNumber++;
}
.animatereset {
  animation-iteration-count: 0;
}

.animated { animation-iteration-count: 1 }
/* ANIMATE.CSS */
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  
  .animated.infinite {
    animation-iteration-count: infinite;
  }
  
  .animated.delay-1s {
    animation-delay: 1s;
  }
  
  .animated.delay-2s {
    animation-delay: 2s;
  }
  
  .animated.delay-3s {
    animation-delay: 3s;
  }
  
  .animated.delay-4s {
    animation-delay: 4s;
  }
  
  .animated.delay-5s {
    animation-delay: 5s;
  }
  
  .animated.fast {
    animation-duration: 800ms;
  }
  
  .animated.faster {
    animation-duration: 500ms;
  }
  
  .animated.slow {
    animation-duration: 2s;
  }
  
  .animated.slower {
    animation-duration: 3s;
  }
  
  @media (print), (prefers-reduced-motion: reduce) {
    .animated {
      animation-duration: 1ms !important;
      transition-duration: 1ms !important;
      animation-iteration-count: 1 !important; 
    }
  }

  /* END ANIMATE CSS */

  /* FLIP.CSS */
  @keyframes flip {
    from {
      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
      animation-timing-function: ease-out;
    }
  
    40% {
      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -190deg);
      animation-timing-function: ease-out;
    }
  
    50% {
      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -170deg);
      animation-timing-function: ease-in;
    }
  
    80% {
      transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
        rotate3d(0, 1, 0, 0deg);
      animation-timing-function: ease-in;
    }
  
    to {
      transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
      animation-timing-function: ease-in;
    }
  }
  
  .animated.flip {
    backface-visibility: visible;
    animation-name: flip;
  }
  /* END FLIP CSS */

  /* MY STYLE */

  body{
      background: #555555;
  }

  #coin{
      width: 21.5rem;
      height: 21.5rem;
  }

  .coin-container{
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      margin-top:15vh;
  }

  /* END MY STYLE */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="moneta.js" defer></script>
    <title>Document</title>
</head>
<body>

    <div class="coin-container">
        <img src="https://qph.fs.quoracdn.net/main-qimg-57e97e36918b359f28e86b8cbf567436.webp" id="coin">
    </div>
   
    
</body>
</html>
0 голосов
/ 03 мая 2020

добро пожаловать в stackoverflow. Я хотел бы просто указать несколько ОЧЕНЬ важных вещей, которые следует иметь в виду при использовании stackoverflow, чтобы задать вопрос. Крайне важно, чтобы вы создали Минимальный и воспроизводимый пример проблемы и указали фактическую ошибку в своем сообщении. для справки, пожалуйста, обратитесь к руководству сообщества о том, как опубликовать хороший вопрос .

я получил возможность запустить ваш код в jsfiddle , часть javascript вашего кода работает нормально. проблема, кажется, исходит от css

  @media (print), (prefers-reduced-motion: reduce) {
    .animated {
      animation-duration: 1ms !important;
      transition-duration: 1ms !important;
      animation-iteration-count: 1 !important; 
    }
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...