首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

翻转新卡片时重置旧卡片翻转

在实现卡片翻转效果时,如果你希望在翻转新卡片时重置旧卡片的翻转状态,可以使用 Vue.js 来管理卡片的状态。以下是一个完整的示例,展示如何在翻转新卡片时重置旧卡片的翻转状态。

示例

假设你有一个包含多张卡片的组件,每张卡片可以通过点击进行翻转。我们将使用 Vue.js 来管理卡片的状态,并在翻转新卡片时重置旧卡片的翻转状态。

步骤 1: 创建 Vue 组件

首先,创建一个 Vue 组件来管理卡片的状态和翻转效果。

代码语言:javascript
复制
<!DOCTYPE html>
<html>
<head>
  <title>Card Flip Example</title>
  <style>
    .card {
      width: 100px;
      height: 150px;
      perspective: 1000px;
      margin: 10px;
      display: inline-block;
    }
    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }
    .card.flipped .card-inner {
      transform: rotateY(180deg);
    }
    .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }
    .card-back {
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-for="(card, index) in cards" :key="index" class="card" :class="{ flipped: card.flipped }" @click="flipCard(index)">
      <div class="card-inner">
        <div class="card-front">
          Front {{ index + 1 }}
        </div>
        <div class="card-back">
          Back {{ index + 1 }}
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        cards: [
          { flipped: false },
          { flipped: false },
          { flipped: false },
          // 你可以添加更多卡片
        ]
      },
      methods: {
        flipCard(index) {
          // 重置所有卡片的翻转状态
          this.cards.forEach((card, i) => {
            if (i !== index) {
              card.flipped = false;
            }
          });
          // 翻转当前卡片
          this.cards[index].flipped = !this.cards[index].flipped;
        }
      }
    });
  </script>
</body>
</html>

解释

  1. HTML 结构:在 #app 容器中,我们使用 v-for 指令来循环渲染卡片。每张卡片都有一个 card 类,并根据 card.flipped 状态动态添加 flipped 类。
  2. CSS 样式:使用 CSS 来定义卡片的样式和翻转效果。.card-inner 元素在翻转时会旋转 180 度。
  3. Vue 实例
    • data:包含一个 cards 数组,每个卡片对象都有一个 flipped 属性来表示其翻转状态。
    • methodsflipCard 方法用于翻转卡片。在翻转新卡片时,首先重置所有其他卡片的翻转状态,然后翻转当前卡片。

使用方法

  1. 打开浏览器并加载 HTML 文件。
  2. 点击任意卡片,卡片将翻转。
  3. 当你点击另一张卡片时,之前翻转的卡片将重置为未翻转状态,而新点击的卡片将翻转。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券