翻转卡片，CSS 网络应用动画

Question

我已经成功地在 React 中构建了一张正面和背面的卡片，并在 CSS 悬停时成功翻转了它。但是，我想在 click/touch.

上翻转它

我尝试将变换属性设置为 class 并在点击时切换 class 但没有成功。

你会如何完成这个？

这就是我目前通过悬停来翻转它的方式：

.card {
  position: relative;
  perspective: 800px;
  transition: transform 1s ease;
  perspective: 1000px;
} 
 
.card > * {
  width: 10rem;
  transition: transform 1s ease;
  backface-visibility: hidden;
}

.card:hover > .card__front {
transform: rotateY(180deg);
}

.card:hover > .card__back {
transform: rotateY(0);
}

和我的 JSX

        <div className={styles.card} >
          {/* FRONTSIDE */}
            <div className={styles.card__front}>
              //FRONTSIDE CONTENT
            </div>

            {/* BACKSIDE */}
            <div className={styles.card__back}>
               //BACKSIDE CONTENT
            </div>
        </div>

更新

这个功能有效，它在我想要的元素上打开和关闭翻转 class。但是，添加 class 后不会发生动画。 .flip class 的作用与 :hover 的作用完全相同..

 //function to toggle class
 const flip = (element) => {
    console.log(element);
    element.classList.toggle("flip");
  };

//the css class
.flip {
  transform: rotateY(180deg);
}

Answer 1

我还在学习 javascript 但这是我想出的...

我使用 javascript 制作了一个片段，你可以点击“卡片”，它会回到后面，当你“鼠标移开”时，它会旋转回到前面，或者如果你注释掉第二个 cards.forEach 你可以点击另一张卡片，它会旋转回到前面，你点击的卡片会旋转到后面。

我制作了一个名为“.card__inner.is-flipped”的class。使用在 javascript 中声明的针对所有“.card__inner”的“卡片”变量，我在“点击”和“ mouseleave”到每张卡片。

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

cards.forEach(el => {
    el.addEventListener('click', function() {
        cards.forEach(el => el.classList.remove('is-flipped'));
        el.classList.add('is-flipped');
    });
});

cards.forEach(el => {
    el.addEventListener('mouseleave', function() {
        cards.forEach(el => el.classList.remove('is-flipped'));
    });
});

.cardRowWrapper { //RowWrapper  CARD
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    width: 45rem;
    height: 35rem;
    perspective: 800px;
    z-index: 100;
}

.card__inner { //Skills circle
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 12rem;
    width: 12rem;
    border-radius: 50%;
    background: green;
    transition: transform 1s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
          -o-transform-style: preserve-3d;
    position: relative;
}

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

.card__face {
    position: absolute;
    backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
          -ms-backface-visibility: hidden;
            -o-backface-visibility: hidden;
    overflow: hidden;
}

.card__face--front {
    display: flex;
    backface-visibility: hidden;
    align-items: center;
    justify-content: center;
}

.card__face--back {
    display: block;
    transform: rotateY(180deg);
}

            <div class="cardRowWrapper">
                    <div class="card__inner">
                        <div class="card__face card__face--front">
                          <p>This is the front</p>
                        </div>
                        <div class="card__face card__face--back">
                            <span class="skillsSubHeading">This is the back</span>
                        </div>
                    </div>

                    <div class="card__inner">
                        <div class="card__face card__face--front">
                          <p>This is the front</p>
                        </div>
                        <div class="card__face card__face--back">
                            <span class="skillsSubHeading">This is the back</span>
                        </div>
                    </div>

                    <div class="card__inner">
                        <div class="card__face card__face--front">
                          <p>This is the front</p>
                        </div>
                        <div class="card__face card__face--back">
                            <span class="skillsSubHeading">This is the back</span>
                        </div>
                    </div>

                    <div class="card__inner">
                        <div class="card__face card__face--front">
                          <p>This is the front</p>
                        </div>
                        <div class="card__face card__face--back">
                            <span class="skillsSubHeading">This is the back</span>
                        </div>
                    </div>

                    <div class="card__inner">
                        <div class="card__face card__face--front">
                          <p>This is the front</p>
                        </div>
                        <div class="card__face card__face--back">
                            <span class="skillsSubHeading">This is the back</span>
                        </div>
                    </div>

                    <div class="card__inner">
                        <div class="card__face card__face--front">
                          <p>This is the front</p>
                        </div>
                        <div class="card__face card__face--back">
                            <span class="skillsSubHeading">This is the back</span>
                        </div>
                    </div>
                </div>

Answer 2

您可以使用js给元素添加样式。

您忘记添加的内容很简单，您忘记了过渡：class 上的变换 1s 和透视：1000px。越少效果越强烈

HTML:-

<link href="style.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
<div class="card-warpper">
  <span onclick="flipCard()" class="card">
    <div class="front">
      Aye
    </div>
    <div class="back">
      Bye
    </div>
  </span>
</div>

CSS:-（您将根据需要进行编辑）

body {
  background: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.card-warpper {
  width: 50%;
  height: 30%;
  perspective: 1000px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 1s;
}

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

.front {
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  color: black;
  font-size: 2rem;
}
.back {
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  color: antiquewhite;
  font-size: 2rem;
  transform: rotateY(180deg);
}

最后，JS:-

function flipCard() {
  let card = document.getElementsByClassName("card")[0];
  card.classList.toggle("card-clicked");
}

如果此回答对您有帮助，请点击旁边的勾选接受回答。

Answer 3

问题是当使用 .toggle 方法添加 class 时，React 不会重新渲染 DOM。

解决方案是从 class 列表中创建一个状态，然后使用 setState 方法从 class 列表中添加 class。这会触发重新渲染

//JS
const [classlist, setClasslist] = useState(styles.card)

const flip = () => {
setClasslist(classlist + styles.flip)
}

//HTML
<div className={classlist} onClick={() => flip()}>

翻转卡片，CSS 网络应用动画

Flipping a card, CSS animation for web app

css

animation

flip

reactjs

card

更新