Vue.js 进入和离开vue转换类'；行不通

我创建了codepen，它是一个简单的翻转卡，在codepen中工作良好，但当我在使用cli创建的vue项目中添加此项目时，一切正常；单击一张卡时，它会显示卡的背面，但不会应用该转换，以便用户可以直观地看到它正在旋转。它旋转得很快，听起来好像过渡不起作用

这是模板代码

  <div v-for="card in cards" @click="toggleCard(card)" :key="card.id">
    <transition name="flip">
      <div
           v-bind:key="card.flipped"
           v-html="card.flipped ? card.back : card.front"
           ></div>
    </transition>
  </div>

和css代码：

.flip-enter-active {
  transition: all 2s ease;
}

.flip-leave-active {
  display: none;
}

.flip-enter,
.flip-leave {
  transform: rotateY(180deg) !important;
  opacity: 0;
}

有人能帮助解释为什么在vue cli项目中转换如此之快或者可能不适用吗？

---

提前感谢您

您提供的代码笔使用Vue 2。您的问题标记为Vue 3，因此我假设您使用的是Vue 3

Vue 3更改了转换类名称-

---

-enter

和

-leave

现在是

-enter from

和

-leave from

我在codesandbox中创建了一个vue cli项目：动画工作正常。也许你可以交叉检查你的版本和我的版本，看看是否有任何差异。

.flip-enter-active {
  transition: all 2s ease;
}

.flip-leave-active {
  display: none;
}

.flip-enter,
.flip-leave {
  transform: rotateY(180deg) !important;
  opacity: 0;
}