进入和离开 vue 过渡类不起作用

问题描述

我创建了 this 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>

和脚本代码

export default {
  name: "FlipCard",data() {
    return {
      cards: [
        // cards here
      ],};
  },methods: {
    toggleCard: function (card) {
      const isFlipped = card.flipped;

      this.cards.forEach((strategy) => {
        strategy.flipped = false;
      });

      isFlipped === true ? (card.flipped = false) : (card.flipped = true);
    },},};

和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 项目中转换如此之快或者可能不适用？ 提前致谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）