Блог

Я создал этот сайт CodePen, который представляет собой простой флип карты и он отлично работает в сайт CodePen, но когда я добавить этот проект в мой Вью проект, созданный с командной строки, все работает нормально; при нажатии на карту, он показывает оборотной стороне карты, но это не относится, что переход так что пользователь может визуально видеть, что она вращается. Он вращается очень быстро, похоже, что переход не влияет.

Это код шаблона

   <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 2. Ваш вопрос помечен Vue 3, поэтому я предполагаю, что вы используете Vue 3.

Vue 3 внес изменения в имена классов перехода — https://v3.vuejs.org/guide/migration/transition.html#_2-x-syntax.

-enter и -leave являются сейчас -enter-from и -leave-from .