我一直在学习一些简单的 CSS 动画，比如这个卡片翻转，但是当我创建下一个卡片元素时，动画似乎中断了并且没有执行。
动画本身很基础，点击卡片应该水平翻转。我想知道是否必须为第二张卡片创建额外的监听器才能为其设置动画？
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/
使用 Document#querySelectorAll 获取所有元素方法，然后通过将集合转换为数组来遍历集合，最后将事件处理程序绑定(bind)到每个元素。
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>