Vuejs转换无法使用计算属性答案

【问题标题】：Vuejs Transition not functioning with computed propertyVuejs转换无法使用计算属性
【发布时间】：2018-10-29 17:57:52
【问题描述】：

我正在创建一个简单的库存系统，该系统将为项目提供各种类别，以及显示所有项目的选项。

从“全部”类别转到“一般”类别将删除不必要的项目，但会在很长一段时间内留下间隙，并且在间隙滑动到位后没有项目动画。

我正在使用 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/

【问题讨论】：

标签： vue.js animate.css vuejs-transition

【解决方案1】：

在列表项消失的地方留下的间隙是因为正在应用过渡的元素会一直保持原位，直到 leave-active 动画阶段完成。

简单的解决方法是将position: absolute; 添加到离开元素。这将允许兄弟列表项占据它的位置。

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

JSFiddle

【讨论】：

感谢您编辑 JSFiddle 和解释！