Vuejs Transition 无法使用计算 属性

Question

我正在创建一个简单的库存系统，其中包含各种项目类别，以及显示所有项目的选项。

从'all'分类到'general'分类会去掉不需要的item，但会留下很长一段时间的空隙，空隙滑动后item没有动画到位。

我正在使用 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; 添加到离开元素。这将允许兄弟列表项占据它的位置。

下面是您的示例的更新版本，在 leave-active-class 属性中添加了额外的 class zoomOut__absolute。添加额外的 class 以避免覆盖 animate.css:

的样式

JSFiddle