我对Java语言还很陌生,到目前为止,我真的很喜欢Vue。我想对列表中项目的重新排序进行动画处理,并使用transition-group
来这样做。它可以工作,但是我发现在FLIP动画中让项目相互重叠会产生令人困惑的结果:很难掌握上升或下降的幅度以及幅度。
new Vue({
el: '#flip-list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9]
},
methods: {
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
})
.flip-list-move {
transition: transform 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="flip-list-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-for="item in items" v-bind:key="item">
{{ item }}
</li>
</transition-group>
</div>
是否有一种简单的方法(例如,一些CSS)使项目在向上/向下移动时向左/向右偏离一点?理想情况下,距离与移动长度成正比(即获得/失去的等级数量)?
非常感谢您的帮助!
我对Java语言还很陌生,到目前为止,我真的很喜欢Vue。我想对列表中项目的重新排序进行动画处理,并使用过渡组来这样做。它有效,但是我发现拥有...