vue.js - Vuejs转换无法使用计算属性

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