时间戳

首页 > 解决方案 > 卡片翻转动画

javascript - 卡片翻转动画

问题描述

我正在做一个项目，它需要一个卡片翻转动画。我已经做到了，但是当我尝试将更多卡片添加到 HTML 中时，我绊倒了，第二张卡片不会像第一张卡片一样在点击时翻转。我想不通它为什么这样做。我认为它是 javascsript 代码的一部分。

这是代码笔： https ://codepen.io/chellios-byte/pen/ZEeNvOM

const card = document.querySelector('.card__inner');

card.addEventListener('click', function () {
    card.classList.toggle('is-flipped');
});

标签： javascripthtmlcssanimation

解决方案

document.querySelector你只选择第一个找到的元素。如果您有多个，则需要 querySelectorAll返回一个元素数组。

const cards = document.querySelectorAll('.card__inner');


cards.forEach(card => {
  card.addEventListener('click', function() {
    card.classList.toggle('is-flipped');
  });
})
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  width: 100%;
  min-height: 100vh;
}

.card__container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5rem;
}

.card {
  margin: 10rem auto 0;
  width: 20rem;
  height: 32rem;
}

.card__inner {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
  backface-visibility: hidden;
}

.card__inner.is-flipped {
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0px 3px 18px 3px rgb(0, 0, 0, 0.2);
}

.card__face h2 {
  text-align: center;
  padding: 1rem 0;
  font-size: 1.8rem;
  letter-spacing: 0.1rem;
  font-weight: 500;
}

.card__face p {
  font-size: 1.11rem;
  padding: 0.3rem 1rem;
  letter-spacing: 0.012rem;
  font-weight: 300;
}

.card__face--front {
  background-image: url("/img/mountain-view.webp");
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
}

.card__face--front-text {
  height: 100%;
  margin-top: 16rem;
  background: rgba(228, 228, 228, 0.699);
}

.card__face--back {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  border-radius: 10px;
}

.card__content {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.card__content a {
  text-decoration: none;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
  font-size: 1.3rem;
}

.card__content a:hover {
  color: rgba(hsl(0, 0%, 97%), green, blue, alpha);
}

.card__header {
  width: 100%;
}

.card__header>h2 {
  text-align: center;
  padding: 1rem 0;
  font-size: 2rem;
  letter-spacing: 0.1rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Card Flip</title>
</head>

<body>
  <div class="card__container">
    <div class="card">
      <div class="card__inner">
        <div class="card__face card__face--front">
          <div class="card__face--front-text">
            <h2>Mountain view</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis facere blanditiis vitae dolorum architecto laboriosam quas numquam debitis, eaque, ducimus perspiciatis praesentium earum molestias in ab commodi, mollitia voluptate id.
            </p>
          </div>
        </div>
        <div class="card__face card__face--back">
          <div class="card__content">
            <div class="card__header">
              <h2>Himalaya</h2>
            </div>
            <div class="card__body">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. At, vel, quas ducimus consequuntur quaerat numquam optio molestiae ad libero eos perferendis minima eveniet eius consequatur dolorum aperiam iusto incidunt quod quibusdam! Adipisci est sequi aut
              eius possimus expedita laboriosam consequuntur, quo beatae necessitatibus delectus quisquam ipsam! Libero, vero porro aspernatur quibusdam adipisci esse perferendis tenetur voluptatibus quas, sed expedita. Assumenda fugiat officia consequatur.
              Perspiciatis, ex doloribus aliquid magnam inventore quia sit debitis hic totam impedit fugiat ipsam suscipit est recusandae?
            </div>
            <a href="#">View more</a>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card__inner">
        <div class="card__face card__face--front">
          <div class="card__face--front-text">
            <h2>Mountain view</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis facere blanditiis vitae dolorum architecto laboriosam quas numquam debitis, eaque, ducimus perspiciatis praesentium earum molestias in ab commodi, mollitia voluptate id.
            </p>
          </div>
        </div>
        <div class="card__face card__face--back">
          <div class="card__content">
            <div class="card__header">
              <h2>Himalaya</h2>
            </div>
            <div class="card__body">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. At, vel, quas ducimus consequuntur quaerat numquam optio molestiae ad libero eos perferendis minima eveniet eius consequatur dolorum aperiam iusto incidunt quod quibusdam! Adipisci est sequi aut
              eius possimus expedita laboriosam consequuntur, quo beatae necessitatibus delectus quisquam ipsam! Libero, vero porro aspernatur quibusdam adipisci esse perferendis tenetur voluptatibus quas, sed expedita. Assumenda fugiat officia consequatur.
              Perspiciatis, ex doloribus aliquid magnam inventore quia sit debitis hic totam impedit fugiat ipsam suscipit est recusandae?
            </div>
            <a href="#">View more</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>

</html>

推荐阅读