这是我的代码:我想在每次数据更新时在 HelloWorld 组件上创建一个转换。过渡本身工作正常
<transition name="fade">
<p v-if="awesome">Vue is awesome</p>
</transition>
这是我动态创建的“卡片”。
<v-row no-gutters>
<v-col cols="12" sm="4" md="4" v-for="(todo, index) in todos" v-bind:key="index">
<v-card class="pa-2" outlined tile>
<transition name="fade">
<HelloWorld
v-bind:todos="todos"
v-bind:index="index"
v-bind:class="(todos[index].done)?'green':'red'"
/>
</transition>
</v-card>
</v-col>
</v-row>
此处过渡不起作用。
CSS在这里:
<style scoped>
.top {
background: blue;
color: white;
display: flex;
justify-content: space-around;
border-bottom: 2.5px solid black;
}
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 1s;
}
.fade-leave {
}
.fade-leave-active {
transition: 1s;
opacity: 0;
}
</style>
为什么以及如何让它工作?
最佳答案
如果要在循环中为 each
元素设置动画,则必须:
transition
放在循环中。 <transition-group>
,而不仅仅是 <transition>
<v-row no-gutters>
<transition-group name="fade" mode="out-in">
<v-col cols="12" sm="4" md="4" v-for="(todo, index) in todos" v-bind:key="index">
<v-card class="pa-2" outlined tile>
<HelloWorld
v-bind:todos="todos"
v-bind:index="index"
v-bind:class="(todos[index].done)?'green':'red'"
/>
</v-card>
</v-col>
</transition-group>
</v-row>
而且我还建议您不要使用 1s
长动画,它太长了。做这样的事情:CSS
.fade-in-enter-active {
transition: all 0.5s ease;
}
.fade-in-leave-active {
transition: all 0.5s ease;
}
.fade-in-enter, .fade-in-leave-to {
position: absolute; /* add for smooth transition between elements */
opacity: 0;
}
如果动画是抽搐的,您可以在 position: absolute;
和 enter
CSS 规则中添加 leave-to
(或仅用于 leave-active
)。在 vue 文档中查看此页面:https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions
关于vue.js - 循环中元素的VueJS转换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59236565/