进入和离开 类 的 vue 转换不起作用
enter and leave classes of vue transition doesn't work
我创建了 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 2。您的问题被标记为 Vue 3,因此我假设您使用的是 Vue 3。
Vue 3 对转换 class 名称进行了更改 - https://v3.vuejs.org/guide/migration/transition.html#_2-x-syntax.
-enter
和 -leave
现在是 -enter-from
和 -leave-from
.
我创建了 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 2。您的问题被标记为 Vue 3,因此我假设您使用的是 Vue 3。
Vue 3 对转换 class 名称进行了更改 - https://v3.vuejs.org/guide/migration/transition.html#_2-x-syntax.
-enter
和 -leave
现在是 -enter-from
和 -leave-from
.