0

I am creating a simple inventory system that will have various categories for the items, as well as the option to display all items.

Going from the 'all' category to the 'general' category will remove the unnecessary item, but leaves a gap for a significant period of time and there is not animation of the item after the gap sliding into place.

I am doing this using Vuejs and vue2-animate.

computed:
{
    active_items: function()
    {
        var _self = this;
        if(_self.active_category === 'all')
        {
            return _self.items;
        } else
        {
            return _self.items.filter(function(i)
            {
                return i.category === _self.active_category;
            });
        }
    }
},

https://jsfiddle.net/Crotanite/cn07tmho/8/

aBiscuit
  • 4,414
  • 1
  • 17
  • 28
crotanite
  • 79
  • 10

1 Answers1

0

The gap that is left in place of disappearing list items is because an element that transition is being applied to, stays in place until leave-active animation phase is finished.

Simple fix, is to add position: absolute; to a leaving element. This will allow sibling list items to take it's position.

Below is updated version of your example with additional class zoomOut__absolute added to leave-active-class attribute. Additional class is added to avoid overwriting styles of animate.css:

JSFiddle

aBiscuit
  • 4,414
  • 1
  • 17
  • 28