在使用 Vuetify 的 Vue 中,我想使用 animate.css 动态更改 v-cards,但我遇到了问题。 out-in
模式不希望在这种情况下工作。淡入和淡出动画同时移动。如何强制它在结束淡入后开始淡入动画?
new Vue({
el: '#app',
data() {
return {
number: 1,
items: [
{
text: "a",
number: 1
},
{
text: "b",
number: 2
},
{
text: "c",
number: 3
},
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/animate.css" rel="stylesheet"/>
<div id="app">
<div v-for="(item, index) in items" :key="index">
<transition mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutRight">
<v-card dark class="ma-3" v-if="number === item.number">
<p>{{item.text}}</p>
</v-card>
</transition>
</div>
<br>
<v-btn @click="number++; if(number === 4) number = 1;">Next</v-btn>
</div>
最佳答案
出了什么问题?
您的转换位于循环内,这意味着渲染后您将有多个 transitions
彼此没有关系(mode
不起作用)...这是您的模板渲染后的样子:
<div key="0">
<transition mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutRight">
<v-card dark class="ma-3" v-if="true">
<p>a</p>
</v-card>
</transition>
</div>
<div key="1">
<transition mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutRight">
<!-- <v-card dark class="ma-3" v-if="false">
<p>b</p>
</v-card> -->
</transition>
</div>
<div key="2">
<transition mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutRight">
<!-- <v-card dark class="ma-3" v-if="false">
<p>c</p>
</v-card> -->
</transition>
</div>
<div key="3">
<transition mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutRight">
<!-- <v-card dark class="ma-3" v-if="false">
<p>d</p>
</v-card> -->
</transition>
</div>
因此,当您按“下一步”时,您将从一个过渡跳到另一个过渡......在本例中为 mode
丢失了。
我如何解决这个问题?
我们只需要将整个项目包装在一个过渡中,因此在本例中只有一个 transition
这将检测一个元素何时出去以及一个新元素进入(mode
将起作用):
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
number: 1,
items: [{
text: "a",
number: 1
},
{
text: "b",
number: 2
},
{
text: "c",
number: 3
},
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/animate.css" rel="stylesheet" />
<div id="app">
<transition mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutRight">
<template v-for="(item, index) in items">
<v-card dark class="ma-3" v-if="number === item.number" :key="index">
<p>{{item.text}}</p>
</v-card>
</template>
</transition>
<br>
<v-btn @click="number++; if(number === 4) number = 1;">Next</v-btn>
</div>
关于javascript - Vue 过渡模式与 v-for 和 v-if 结合使用时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57453977/