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

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

0 голосов
/ 29 октября 2018

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

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

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

1 Ответ

0 голосов
/ 29 октября 2018

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

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

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

JSFiddle

...