我目前正在Vue.y的帮助下在Vue.js开发一个webapp。
我发现扩展面板元素非常有用,我想在我的网站中使用它。
因此,我轻松获取要从Firebase显示的数据,然后继续使用此模板加载项目:
<v-expansion-panel popout>
<v-expansion-panel-content
v-for="doc in filteredclienti"
:key="doc.id">
<div slot="header">{{doc.data().Nome}} {{doc.data().Cognome}}</div>
<v-card>
Card content
</v-card>
</v-expansion-panel-content>
</v-expansion-panel
一切正常,面板没问题,弹出动画效果也很好。
现在我想为每个项目显示一个简单的进入/离开动画。
我尝试在<transition-group>
之后添加<v-expansion-panel popuot>
代码,但控制台告诉我只需要<v-expansion-panel-content>
元素。
所以我尝试在<transition-group>
内添加<v-expansion-panel-content>
,但在这种情况下,布局不再正确,弹出动画不再有效。
我该怎么办?谢谢!
答案 0 :(得分:0)
这应该可以解决问题,我添加了一个删除按钮,它将“已删除”的文档滑出。 享受。
<template>
<v-app>
<v-expansion-panel popout>
<transition-group name="list" tag="v-expansion-panel">
<v-expansion-panel-content v-for="doc in filteredclienti" :key="doc.id">
<div slot="header">
<span>{{doc.data}}</span>
<v-btn class="error" @click="deleteItem(doc.id)">
<v-icon>delete</v-icon>
</v-btn>
</div>
<v-card>Card content</v-card>
</v-expansion-panel-content>
</transition-group>
</v-expansion-panel>
</v-app>
</template>
<script>
export default {
data: () => ({
filteredclienti: [
{ id: 1, data: "data1" },
{ id: 2, data: "data1" },
{ id: 3, data: "data1" },
{ id: 4, data: "data1" }
]
}),
methods: {
deleteItem(id) {
this.filteredclienti = this.filteredclienti.filter(d => d.id !== id);
}
}
};
</script>
<style>
.list-enter-active,
.list-leave-active {
transition: all 1s;
}
.list-enter,
.list-leave-to {
opacity: 0;
transform: translateX(100vw);
}
</style>