Vue使用动画实现冒泡排序、选择排序

最新推荐文章于 2024-04-23 09:47:19 发布

Coding&Sharing

最新推荐文章于 2024-04-23 09:47:19 发布

阅读量1.9k

点赞数 1

分类专栏： # Vue

本文链接：https://blog.csdn.net/weixin_38500202/article/details/104845564

版权

废话不多说，先看一下使用Vue来实现冒泡排序的动画效果（注意：此处调整了交换过度时间为50毫秒）

冒泡排序动画

再来看一下选择排序的动画效果（注意：同样加快了动画过渡时间）

select_sort

原理：由于Vue是基于MVVM的，所以我们只需要绑定属性后，直接更改绑定的数据即可，不需要每次操纵Dom树了。下面为的图片中的方法就是提取出来的公共方法，动画效果是使用的CSS特性。

	// 激活 
	// 用参数 payload的indexes属性中所有成员，与state.cards 的每个成员（card）的sortIndex属性与进行匹配，
	// 如果找到相等的，就将state.cards 的成员（card）的isActive设置为true
    activate (state, payload) {
      payload.indexes.forEach((index) => {
			state.cards.forEac