Vue.js过渡无法与计算属性一起使用

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