CODEWITHSUNDEEP
vue.js
gb_spectrum
gb_spectrum

Reputation: 2301

Vuejs - List transition via transition-group - parent container not animating smoothly

So I have a list that I am rendering with v-for, and I am also using transition-group to animate adding and removing items from this list. My problem is that while I can animate the adding/removing of list items, the container surrounding my entire list isn't smoothly transitioning its height. I'm wondering how I can fix this.

Here is an example with a 'Run code snippet' at the end: 

var vm = new Vue({
  el: '#vue-instance',
  data: {        
      inventory: [
      {name: 'Air', price: 1000, id:"name0"},
      {name: 'Pro', price: 1800, id:"name1"},
      {name: 'W530', price: 1400, id:"name2"},
      {name: 'One', price: 300, id:"name3"}
    ]
  },
  methods: {
  	addItem() {
    	this.inventory.push({
      	name: 'Acer',
        price: 700,
        id: 'name4'
      });
    },
    removeItem(index) {
    	this.inventory.splice(index, 1);
      
     this.inventory.forEach((item, index) => {
     		item.id = `name${index}`;
     }); 
    }
  }
});
.container {
      background-color: green;
    }
    
    .list-enter {
        opacity: 0;
    }

    .list-enter-active {
        transition: all 2s;
        height: 100%;
        animation: slide-in 2s ease-out forwards;
    }

    .list-leave-to {

    }

    .list-leave-active{
        transition: all 2s;
        opacity: 0;
        animation: slide-out 2s ease-out forwards;
    }

    .list-move {
        transition: transform 2s;
    }

    @keyframes slide-in {
         from {
             transform: translateY(-100px);
         }
         to {
             transform: translateY(0);
         }
     }

    @keyframes slide-out {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateX(30px);
        }
    }
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="vue-instance">
<div class="container">
<ul>
  <transition-group name="list">
    <div v-for="(item, index) in inventory" :key="item.name">
      <label :for="item.id">Hello</label>
      <input :id="item.id">
      <button @click="removeItem(index)">
        Remove item
      </button>
      <button @click="addItem">
        Add item
      </button>
    </div>
  </transition-group>
    
  </ul>
</div>
  
</div>

Upvotes: 2

Views: 1252

Answers (1)

Jacob Goh
Jacob Goh

Reputation: 20855

It can be done by adding a height value to the slide out animation

@keyframes slide-out {
    from {
        transform: translateY(0);
        height: 10px;
    }
    to {
        transform: translateY(-30px);
        height: 0;
    }
}

https://codepen.io/jacobgoh101/pen/EEvNzB?editors=0100

Upvotes: 2

Related Questions