Vue + Vuetify 扩展面板进入/离开动画答案

【问题标题】：Vue + Vuetify expansion panel enter/leave animationVue + Vuetify 扩展面板进入/离开动画
【发布时间】：2018-08-16 21:39:42
【问题描述】：

我目前在 Vuetify 的帮助下用 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

一切正常，面板正常，弹出动画也正常。

现在我想为每个项目显示一个简单的进入/离开动画。

我试图在<v-expansion-panel popuot> 之后添加一个<transition-group> 标记，但控制台告诉我只需要一个<v-expansion-panel-content> 元素。

所以我尝试在<v-expansion-panel-content> 中添加<transition-group>，但在这种情况下布局不再正确，弹出动画不再起作用。

我该怎么做？谢谢！

【问题讨论】：

我的猜测是，您将不得不使用默认的扩展面板弹出动画，或者设计自己的扩展面板以按照您想要的方式进行动画处理。
但我不想为扩展设置动画，我想为进入/离开时刻设置动画

标签： vue.js vuetify.js

【解决方案1】：

这应该可以解决问题，我添加了一个删除按钮，可以将“已删除”的文档滑出。享受。

<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>

【讨论】：