1

Estou desenvolvendo uma espécie de jogo da velha, porém tem um erro que está me atrapalhando, preciso que a animação flip funcione todas as moedas porém, ela só funciona na primeira ignorando as outras.

codigo:http://codepen.io/anon/pen/rmrxVo

como podem ver no codepen o código funciona da maneira certa, porém só na primeira moeda

1 Resposta 1

1

Estás a usar id quando devias usar class. Só podes ter um elemento por página com um dado id. Se mudares para class já vai funcionar bem.

jQuery(document).ready(function($) {

  var spinArray = ['animation900', 'animation1080', 'animation1260', 'animation1440', 'animation1620', 'animation1800', 'animation1980', 'animation2160'];

  function getSpin() {
    var spin = spinArray[Math.floor(Math.random() * spinArray.length)];
    return spin;
  }

  $('.coin').on('click', function() {
    var $this = $(this);
    $this.removeClass(spinArray.join(' ')); 
    setTimeout(function() {
      $this.addClass(getSpin());
    }, 100);
  });

});
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
}

.coin-flip-cont {
  width: 200px;
  height: 200px;
  float: left;
  margin: 0 5px;
}

.coin {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
}

.coin .front,
.coin .back {
  position: absolute;
  width: 200px;
  height: 200px;
}

.coin .front {
  transform: translateZ(1px);
  border-radius: 50%;
  background-image: url('http://placehold.it/200x200/E8117F/000000');
  background-size: cover;
  display: block;
}

.coin .back {
  transform: translateZ(-1px) rotateY(180deg);
  border-radius: 50%;
  background-image: url('http://placehold.it/200x200/000000/E8117F');
  background-size: cover;
  display: block;
}

.coin.animation900 {
  -webkit-animation: rotate900 3s linear forwards;
  animation: rotate900 3s linear forwards;
}

.coin.animation1080 {
  -webkit-animation: rotate1080 3s linear forwards;
  animation: rotate1080 3s linear forwards;
}

.coin.animation1260 {
  -webkit-animation: rotate1260 3s linear forwards;
  animation: rotate1260 3s linear forwards;
}

.coin.animation1440 {
  -webkit-animation: rotate1440 3s linear forwards;
  animation: rotate1440 3s linear forwards;
}

.coin.animation1620 {
  -webkit-animation: rotate1620 3s linear forwards;
  animation: rotate1620 3s linear forwards;
}

.coin.animation1800 {
  -webkit-animation: rotate1800 3s linear forwards;
  animation: rotate1800 3s linear forwards;
}

.coin.animation1980 {
  -webkit-animation: rotate1980 3s linear forwards;
  animation: rotate1980 3s linear forwards;
}

.coin.animation2160 {
  -webkit-animation: rotate2160 3s linear forwards;
  animation: rotate2160 3s linear forwards;
}

@-webkit-keyframes rotate900 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(900deg);
    -moz-transform: rotateY(900deg);
    transform: rotateY(900deg);
  }
}

@keyframes rotate900 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(900deg);
    -moz-transform: rotateY(900deg);
    transform: rotateY(900deg);
  }
}

@-webkit-keyframes rotate1080 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1080deg);
    -moz-transform: rotateY(1080deg);
    transform: rotateY(1080deg);
  }
}

@keyframes rotate1080 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1080deg);
    -moz-transform: rotateY(1080deg);
    transform: rotateY(1080deg);
  }
}

@-webkit-keyframes rotate1260 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1260deg);
    -moz-transform: rotateY(1260deg);
    transform: rotateY(1260deg);
  }
}

@keyframes rotate1260 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1260deg);
    -moz-transform: rotateY(1260deg);
    transform: rotateY(1260deg);
  }
}

@-webkit-keyframes rotate1440 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1440deg);
    -moz-transform: rotateY(1440deg);
    transform: rotateY(1440deg);
  }
}

@keyframes rotate1440 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1440deg);
    -moz-transform: rotateY(1440deg);
    transform: rotateY(1440deg);
  }
}

@-webkit-keyframes rotate1620 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1620deg);
    -moz-transform: rotateY(1620deg);
    transform: rotateY(1620deg);
  }
}

@keyframes rotate1620 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1620deg);
    -moz-transform: rotateY(1620deg);
    transform: rotateY(1620deg);
  }
}

@-webkit-keyframes rotate1800 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1800deg);
    -moz-transform: rotateY(1800deg);
    transform: rotateY(1800deg);
  }
}

@keyframes rotate1800 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1800deg);
    -moz-transform: rotateY(1800deg);
    transform: rotateY(1800deg);
  }
}

@-webkit-keyframes rotate1980 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1980deg);
    -moz-transform: rotateY(1980deg);
    transform: rotateY(1980deg);
  }
}

@keyframes rotate1980 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(1980deg);
    -moz-transform: rotateY(1980deg);
    transform: rotateY(1980deg);
  }
}

@-webkit-keyframes rotate2160 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(2160deg);
    -moz-transform: rotateY(2160deg);
    transform: rotateY(2160deg);
  }
}

@keyframes rotate2160 {
  from {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(2160deg);
    -moz-transform: rotateY(2160deg);
    transform: rotateY(2160deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="coin-flip-cont">
  <div class="coin">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>

<div class="coin-flip-cont">
  <div class="coin">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>

2
  • 1
    Muito obrigado, achei estranho ter funcionado por que a ideia principal era usar classes porém o mesmo erro ainda assim acontecia, devo ter me confundido em alguma parte, de novo obrigado xD Commented 16/05/2017 às 8:38
  • @LucasdeSouza ótimo ter funcionado. Se quiseres podes clicar para marcar a resposta como aceite.
    – Sergio
    Commented 16/05/2017 às 8:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .