Javascript 具有动态css属性的Vue列表呈现

我正在尝试制作一个类似旋转木马的项目列表（比如那些iOS原生日期/时间选择器），可以上移或下移

每个项目的位置基于模型中的

top

属性，该属性最终以绝对位置分配给每个列表项目元素

我设法使它在一个方向上工作，所以如果你按“向上”，它的功能完全符合我的要求（你可以在下面的代码段中查看）。另一方面，当我在另一个方向上使用相同的代码时（除了我将

.pop（）

函数切换到

.shift（）

和

.unshift（）

切换到

.push（）

），它的工作方式不同，特别是项目值会被重新分配，但不会移动

我注意到的是，在第二种情况下，由于某种原因，列表项从零开始呈现，尽管存在项键。因此，坐标转换不会发生

我能做些什么使这个机制在两个方向上都工作？请随意查看我准备的片段：

Vue.component（'list-component'{
模板：“#列出组件”，
名称：“列表组件”，
数据（）{
返回{
型号：[]，
activeIndex:null，
身高：56，
}
},
方法：{
换档轮（方向）{
如果（方向==“向上”）{
const value=this.model[0]。值-1；
此.model.map（（v）=>{
v、 top+=此.itemHeight；
});
this.model.pop（）；
这个。模型。取消移位({
价值
顶部：-this.item高度
});
}否则{
常量值=this.model[this.model.length-1]。值+1；
this.model.shift（）；
此.model.forEach（（v）=>{
v、 top-=此项高度；
});
这个，模型，推({
价值
顶部：this.itemHeight*5
});
}
}
},
安装的（）{
常数数量=5+2；
这个。top=-56；
const currentYear=力矩（）.年；
施工成本=数学楼层（数量/2）；
this.activeIndex=quantity-toTheSides-1；
const start=moment（）.clone（）.subtract（toTheSides，'Y'）；
this.model=数组（数量）.fill（）.map（（v，i）=>{
const value=start.clone（）；
开始。添加（1，'Y'）；
返回{
value:value.year（），
顶部：i*this.itemHeight-this.itemHeight
};
});
}
});
新Vue（{
el:“#应用程序”
});
.container{
位置：相对位置；
溢出：隐藏；
高度：280px；
宽度：50px；
}
.包装纸{
显示器：flex；
对齐项目：居中；
}
.按钮{
位置：相对位置；
z指数：999；
}
.md车轮项目{
填充：16px0；
显示器：flex；
位置：绝对位置；
弹性：1；
对齐项目：居中；
证明内容：中心；
过渡：顶部。2缓进输出；
将改变：顶部；
&.处于活动状态{
颜色：红色；
}
}

{{item.value | | item}}
向上
下降
使用此github问题（github.com/vuejs/vue/issues/4834）作为参考，看起来我只需要使用过渡组
：

它们不是重新创建的（项目），而是由insertBefore移动的。如果在转换期间移动了具有转换的元素，则转换将中断。当所有操作完成时，键确保元素最终位于DOM中的正确位置，但不能保证它们在过程中永远不会移动。这是确保算法简洁且结果一致所必需的。这可能会在将来得到改进，但这不是什么非常关键的事情

使用这个github问题（github.com/vuejs/vue/issues/4834）作为参考，看起来我只需要使用
转换组
：

它们不是重新创建的（项目），而是由insertBefore移动的。如果在转换期间移动了具有转换的元素，则转换将中断。当所有操作完成时，键确保元素最终位于DOM中的正确位置，但不能保证它们在过程中永远不会移动。这是确保算法简洁且结果一致所必需的。这可能会在将来得到改进，但这不是什么非常关键的事情

这肯定是一个困难的问题。我建议针对这个特定的用例研究vue的
转换组
s，因为它们可能更适合您想要做的事情：@b-fleming，这确实是一种解决问题的方法，但我仍然有兴趣按照上面描述的方式来做。顺便说一句，我用你建议的
transitiongroup
制作了一把小提琴：@b-fleming你完全正确。阅读github问题（）似乎过渡组是我唯一的出路。这肯定是一个困难的问题。我建议针对这个特定的用例研究vue的
转换组
s，因为它们可能更适合您想要做的事情：@b-fleming，这确实是一种解决问题的方法，但我仍然有兴趣按照上面描述的方式来做。顺便说一句，我用你建议的
transitiongroup
制作了一把小提琴：@b-fleming你完全正确。阅读github问题（）我的唯一出路似乎是
过渡组
。