翻转卡片，Web 应用程序的 CSS 动画

问题描述

我已经成功地在 React 中构建了一张正面和背面的卡片，并在使用 CSS 悬停时成功翻转。但是，我想在点击/触摸时翻转它。

我尝试将转换属性设置为一个类并在点击时切换该类，但没有成功。

您将如何实现这一目标？

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

.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>

更新

此功能有效，它在我想要的元素上打开和关闭翻转类。但是，一旦添加了类，就不会发生动画。 .flip 类做的事情和 :hover 做的完全一样..

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

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

  

解决方法

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

您忘记添加的内容非常简单，您忘记了过渡：在类和透视上变换 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");
}

如果这个答案对您有帮助，请不要犹豫，点击旁边的复选标记接受答案。

,

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

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

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

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

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