Question

我一直在学习一些简单的CSS动画，例如这张卡片翻转，但是当我创建下一个卡片元素时，该动画似乎坏了并且无法执行。

动画本身是非常基本的，应将卡水平翻转onclick。我想知道是否必须为第二张卡片创建额外的听众以对其进行动画处理？

flipCard();

function flipCard() {
  var card = document.querySelector('.card');
  card.addEventListener('click', function() {
    card.classList.toggle('is-flipped');
  });
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  overflow: hidden;
  color: #fff;
  background: hsl(227, 10%, 10%);
  min-height: 100vh;
  min-width: 100vw;
}

.wrapper {
  display: flex;
  justify-content: space-evenly;
}

.scene {
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

.card {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}

.card.is-flipped {
  transform: rotateY(180deg);
}

.cardFace {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.cardFaceFront {
  background: red;
}

.cardFaceBack {
  background: blue;
  transform: rotateY(180deg);
}

<div class="wrapper">
  <div class="scene">
    <div class="card">
      <div class="cardFace cardFaceFront">front</div>
      <div class="cardFace cardFaceBack">back</div>
    </div>
  </div>
  <div class="scene">
    <div class="card">
      <div class="cardFace cardFaceFront">front</div>
      <div class="cardFace cardFaceBack">back</div>
    </div>
  </div>
</div>

链接到jsfiddle：https://jsfiddle.net/kapiko112/pokejcr4/

Answer 1

使用Document#querySelectorAll方法获取所有元素，然后通过将集合转换为数组来遍历集合，最后将事件处理程序绑定到每个元素。

function flipCard() {
  // get all elements 
  var cards = document.querySelectorAll('.card');
  // convert htmlcollection to array for iterating
  Array.from(cards)
    // iterate over elements
    .forEach(function(card) {
      // attach evenet handler
      card.addEventListener('click', function() {
        card.classList.toggle('is-flipped');
      });
    });
}

flipCard();

function flipCard() {
  // get all element 
  var cards = document.querySelectorAll('.card');
  Array.from(cards).forEach(function(card) {
    card.addEventListener('click', function() {
      card.classList.toggle('is-flipped');
    });
  });
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  overflow: hidden;
  color: #fff;
  background: hsl(227, 10%, 10%);
  min-height: 100vh;
  min-width: 100vw;
}

.wrapper {
  display: flex;
  justify-content: space-evenly;
}

.scene {
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

.card {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}

.card.is-flipped {
  transform: rotateY(180deg);
}

.cardFace {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.cardFaceFront {
  background: red;
}

.cardFaceBack {
  background: blue;
  transform: rotateY(180deg);
}

<body>
  <div class="wrapper">
    <div class="scene">
      <div class="card">
        <div class="cardFace cardFaceFront">front</div>
        <div class="cardFace cardFaceBack">back</div>
      </div>
    </div>
    <div class="scene">
      <div class="card">
        <div class="cardFace cardFaceFront">front</div>
        <div class="cardFace cardFaceBack">back</div>
      </div>
    </div>
  </div>
</body>

如何使用CSS设置多个元素的动画

1 个答案: