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

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

示例

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

步骤 1: 创建 Vue 组件

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

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

解释

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

使用方法

打开浏览器并加载 HTML 文件。
点击任意卡片，卡片将翻转。
当你点击另一张卡片时，之前翻转的卡片将重置为未翻转状态，而新点击的卡片将翻转。

页面内容是否对你有帮助？

有帮助

没帮助

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

、、

当您翻转第二张卡时，是否可以自动将旧卡翻转回来？我有一个我在this JSFiddle中找到的问题。我在互联网上四处寻找，但找不到任何解决这个特定问题的方法。它可能类似于this。希望这能有所帮助:) 我想添加一个按钮来手动翻转卡来回。

浏览 34提问于2021-04-07得票数 2

回答已采纳

2回答

UICollectionView滚动问题

、、

我正在使用集合视图来显示“卡片”。当用户单击其中一张卡时，视图会通过翻转动画(通过在didSelectItemAtIndexPath中调用的函数到另一边)进行更改。如果用户触摸另一张卡，他们可以单击另一张，旧卡将翻转回旧视图，新卡将翻转到新视图。或者，他们可以再次点击原始卡并将其翻转回来。这很好，除了滚动到滚动视图中的卡片时，其他卡片似乎

浏览 2提问于2013-09-09得票数 0

1回答

如何在卡片列表(角)中翻转一张卡片

、

我只想当我点击一张卡片，然后那张卡就会翻转。但是问题是当我点击一张卡片时，所有的卡片都会翻转。 TypeScript

浏览 1提问于2022-06-09得票数 -1

回答已采纳

1回答

如何在初始化箭头函数之前使用addEventlistenr调用箭头函数？

、、

如果我使用箭头函数而不是普通函数翻转，并且在初始化箭头函数之前向其添加addeventlistiner，那么我就无法调用该函数。**Console.log(卡片)；cards.forEach(卡片) => card.addEventListener(“单击”，翻转)；var flip = ()=>{ console.log(“卡片翻转”)；} output ：在单击卡片时，它应该将输出作为“卡片翻转”，但它不

浏览 19提问于2022-09-03得票数 0

2回答

点击旋转GameObject

、

我试着在点击时得到一张可以翻转的卡片，但是翻转只在第一次翻转时起作用。在调试过程中，我可以看到每次单击时都会调用OnMouse。

浏览 0提问于2013-12-27得票数 0

1回答

当按下子按钮(具有不同功能)时，卡会被翻转。如何阻止向父母的传播？

、

我有一张卡，当有人按下它时，它会被翻转(这是完全好的)，这样用户就可以从卡的背面读取更多的信息。卡本身包含两个按钮:第一个按钮用于将用户重定向到另一个页面，第二个按钮触发一个模式弹出。例如，按下触发模式弹出的按钮--卡被翻转，模式出现(您可以在后台看到翻转的卡片)。我如何‘隔离’按钮上的点击，以避免触发卡翻转？

浏览 0提问于2020-02-20得票数 0

回答已采纳

1回答

在使用JS动态创建卡片而不是用HTML对卡片进行硬编码之后，点击翻转卡停止工作。

、、

我决定将所有硬编码的数据移动到我的script.js中的一个对象中，以便动态地为该对象中的每个项目创建一个翻转卡。这里没问题。(旁边，我还添加了一个加载背景动画到卡片上，这样这些卡只在几秒钟后才显示它们的内容。这里也没有问题。)我觉得这是个

浏览 1提问于2021-11-28得票数 0

回答已采纳

1回答

在单击事件之前显示Javascript警报

、、、

我编写了这个方法，它将卡片朝上翻转onClick，然后显示一个alert方法。但是，由于某些原因，当我单击卡片时，它将保持正面向下，并显示alert方法。然后，一旦我关闭警报，卡片就会翻过来。如何让卡翻转，然后显示alert？newCard.addEventListener('click', flipCard); ...

浏览 2提问于2016-11-14得票数 0

回答已采纳

1回答

在RecyclerView中翻转卡片的动画

、

我有一个5张卡片的水平回收器视图，在点击每一张卡片时，我必须翻转那张卡片，并在被点击的卡片位置显示新的卡片，我该怎么做？我尝试过使用ViewFlipper，但没有成功。

浏览 17提问于2016-09-07得票数 2

4回答

如何添加一个简单的卡翻转动画？

、、、、

到目前为止，我的大部分工作，但卡翻转动画是一个痛苦的a**。当你拖放一张卡片时，卡片的背面会被一个正面所取代。现在，当这个动作发生时，我想添加一个漂亮的翻转动画。在类中的CSS中：.black { <<<c

浏览 0提问于2014-06-14得票数 4

回答已采纳

1回答

翻转动画在mac OS X上的chrome中不起作用

、

我有一个仪表板，因为我正在使用CSS3翻转动画，翻转动画在windows中工作得很好，但当谈到Mac上的铬时，翻转动画是闪烁的，当我悬停在DIV.Please上时，它提供了一些修复。谢谢。

浏览 0提问于2016-06-20得票数 2

2回答

Flutter“翻转卡片”在每次翻转时随机选择不同的图片

、

我希望能够翻转一张牌，并看到随机选择的图像。例如:闪存卡，一面是静态图像，我把它翻过来看到一只狗的图片。然后我再次点击，它会翻转到静态图像。我再次点击，我看到了一张猫的照片，等等。卡片来回翻转，但它不会随机选择新的卡片，除非我在每次翻转后重新启动构建。所以，我遗漏了一块告诉应用程序重新挑选的东西。您的帮助将不胜感激！翻转卡片描述

浏览 1提问于2020-04-19得票数 0

1回答

使用选项卡索引遍历div元素

、、

因此，我正在创建一个记忆游戏，我希望能够选择和翻转不同的卡使用键盘。现在，我在卡片上使用选项卡索引(这是DIV元素)，但问题是，当使用tab遍历卡片时，我没有按照正确的顺序选择卡片，而是在选择时跳过。我尝试将选项卡索引值设置为不同的值，例如第一张卡的值最低，最后一张卡的值最高。注意，我只使用香草javascript。

浏览 5提问于2021-10-27得票数 0

回答已采纳

3回答

翻转按钮触发的卡片

、

我想有两张卡片的定义，并翻转他们切换视图。我想要一个编辑和保存按钮，最终触发翻转。但我被困在触发按钮上了(还在学习) 此示例项目在单击卡片时翻转卡片，而不是单击按钮本身。如果我从卡片上删除操作并分配一个onclick="flipCard()"函数.我不知道在这个函数中该定义什么。

浏览 14提问于2019-12-09得票数 1

回答已采纳

1回答

找出用户点击了哪张卡(精灵)

、、、

我有两个组-一个用于“封面”，另一个用于卡片本身。封面是为了隐藏卡片而放在卡片顶端的封面。我不明白的问题是，当用户点击其中一张卡片时，我使用kill()来移除封面卡片，下面的卡片显示(本质上是翻转的)，但是我不知道如何找到卡片在群组中的位置。如何找出用户点击的是哪张卡？

浏览 4提问于2016-02-15得票数 0

1回答

颤振AnimationController /吐温复用在多AnimatedBuilder中的应用

、

我正在用多张卡片构建一个屏幕，在点击其中一张卡片时，卡片应该会翻转。我没有问题，使用AnimatedController与Tweens和AnimatedBuilder动画的卡。我的问题是，在我所有的“card”小部件中重用/应用相同AnimatedController的最佳方法是什么，而不必创建多个AnimatedControllers和Tweens，并将其设置为每一张卡，但仍然允许我将它们分别动画化

浏览 0提问于2019-04-27得票数 7

回答已采纳

1回答

Css转换翻转和IE问题

、

我试图做一个css卡翻转效果，并在这里有一些问题。第一，我似乎无法得到javascript，使卡翻转，以恢复翻转。我有一个呼吁，点击任何一面，并由于某种原因，它不是射击的背面的卡片。这张卡简单地朝一个方向翻转，然后消失。我尝试了几种技巧，但似乎没能找到答案。这是我正在做的工作- 最后，当我把内容放在卡片上时，它移动时似乎会闪烁，如果它是正面的图像，当我将它翻转到背面(以铬表示)时，它似乎仍然会显示出来。任何帮助将非

浏览 1提问于2014-10-23得票数 0

回答已采纳

1回答

我可以在点击时使用翻转卡片而不是悬停吗

、、、、

我是CSS的新手，我被要求修改一些现有的翻转卡片，以便在点击时翻转，而不是悬停。这是代码。transform: rotateY(180deg); } 我认为我可以通过将.flip-card:hover更改为.flip-card:active来实现这一点，但这似乎只有在我按下鼠标按钮并在松开时立即翻转的情况下才能起作用

浏览 19提问于2020-12-17得票数 1

回答已采纳

1回答

在向数组传递数组时，响应与useState相关的问题

、、

实际上，我正在做的是制作翻转卡。每次用户在甲板上单击一张卡片时，就会显示出一张卡片，并将该卡片从甲板中移除。卡片的-Flipping已经完成，但是现在当用户单击打开卡片时，它将在3秒后移除打开的卡片，数组将被更新。，但当我传递具有翻转状态的cardsInit时，access现在没有打开或翻转卡片。isFlipped.cardChange.card4} },，但是当传递到cardsInit状

浏览 1提问于2021-09-16得票数 0

4回答