CODEWITHSUNDEEP
vue.jsvuetify.js
L. Gangemi
L. Gangemi

Reputation: 3290

Vue + Vuetify expansion panel enter/leave animation

I'm currently developing a webapp in Vue.js with the help of Vuetify.

I found the expansion panel element very usefull and I wanted to use it in my website.

So I easily get the data i want to display from Firebase and i proceed to load the items with this template:

    <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

Everything works fine, the panel is ok and the popup animation works fine too.

Now I'd like to display a simple enter/leave animation to each item.

I tried to add a <transition-group> tag after the <v-expansion-panel popuot> but the console tells me want only a <v-expansion-panel-content> element.

So i tried to add <transition-group> inside <v-expansion-panel-content> but in this case the layout is no more correct and the popup animation is not working anymore.

How can i do it? Thanks!

Upvotes: 5

Views: 2763

Answers (1)

Yaniv Peretz
Yaniv Peretz

Reputation: 1168

That should do the trick, I've added a delete button, that will slide the "deleted" doc out. enjoy.

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

Upvotes: 2

Related Questions