javascript - 单击 Item 时如何进行 CSS 过渡？

Question

我在 codepen 上创建了一支笔( https://codepen.io/rupamkairi/pen/ExjJRMo?editors=1100 )。当卡悬停在元素上时，卡会旋转(特别是翻转)。我希望当我点击元素(.card)时它会翻转。

.card {
  margin: auto;
  width: 5em;
  height: 8em;
  background-color: transparent;
  perspective: 250px;
}

.card-content {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.card:hover .card-content {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-back {
  border-radius: 5px;
  background-color: white;
  transform: rotateY(180deg);
}

<div class="card">
  <div class="card-content">
    <div class="card-front">
      <h1>🎆</h1>
    </div>
    <div class="card-back">
      <h1>🍕</h1>
    </div>
  </div>
</div>

我尝试使用:active伪类，但在这种情况下我需要握住卡片以使其保持翻转。

有没有办法将 css 动画与 javascript 结合使用？

我想在一个页面上制作多张卡片，并在单击时使它们翻转。

Answer 1

如果您希望卡片在每次点击时切换翻转，请尝试以下操作:

const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");
let flipped = false;

card.addEventListener("click", () => {
    if(!flipped) {
        cardContent.style.transform = "rotateY(180deg)"
    }   else {
        cardContent.style.transform = "rotateY(0deg)"
    }
    flipped = !flipped;
});

或者，如果您希望卡片只翻转一次，请尝试以下操作:

const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");

card.addEventListener("click", () => {
    cardContent.style.transform = "rotateY(180deg)";
});

由于它是通过 JavaScript 实现的，因此从样式表中删除 .card:hover .card-content {transform:rotateY(180deg);}。