进入和离开类的Vue过渡不起作用答案

【问题标题】：enter and leave classes of vue transition doesn't work进入和离开类的Vue过渡不起作用
【发布时间】：2021-07-28 22:19:28
【问题描述】：

我创建了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 项目中过渡如此之快或可能不适用？提前谢谢你

【问题讨论】：

我在代码和框中创建了一个 vue-cli 项目：codesandbox.io/s/blue-wind-pc37d?file=/src/FlipCard.vue 并且动画正常工作。也许您可以交叉检查您的版本和我的版本，看看是否有任何差异。

标签： vue.js css-transitions vuejs3 codepen vue-transitions

【解决方案1】：

您提供的 codepen 使用 Vue 2。您的问题被标记为 Vue 3，所以我假设您使用的是 Vue 3。

Vue 3 对转换类名称进行了更改 - https://v3.vuejs.org/guide/migration/transition.html#_2-x-syntax。

-enter 和 -leave 现在是 -enter-from 和 -leave-from。

【讨论】：