Vuejs Transition не работает с вычисляемым свойством

Question

Я создаю простую систему инвентаря, которая будет иметь различные категории для предметов, а также возможность отображать все предметы.

Переход из категории "все" в категорию "общие" удалит ненужный элемент, но оставит пробел на значительный период времени, и после скольжения на место не будет анимации элемента.

Я делаю это, используя Vuejs и 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/

Answer 1

Разрыв, который остается вместо исчезающих элементов списка, заключается в том, что элемент, к которому применяется переход, остается на месте до leave-active Фаза анимации закончена.

Простое исправление, это добавить position: absolute; к элементу ухода. Это позволит элементам списков братьев и сестер занять свою позицию.

Ниже обновленная версия вашего примера с дополнительным классом zoomOut__absolute Добавлено в leave-active-class приписывать. Добавлен дополнительный класс, чтобы избежать перезаписи стилей animate.css:

JSFiddle