5分钟手撕换牌效果

演示效果

点击后，把点击的牌放到第一个，其他的顺序顺延

以vue为例

创建一个父元素testBox和子元素pai

<div class="testBox">
            <div class="pai" ></div>
        </div>

设置两个一模一样的数组变量。一个用来渲染，一个用来变化。如果在同一数组做操作，会导致transition不生效

 testArr:[
                0,1,2,3,4
            ],
 testArr2:[
                0,1,2,3,4
            ]

给他们设置样式
父元素设置相对定位，子元素绝对定位，按照个数设置 width的百分比，总和为100%

.testBox{
    height: 600px;
    width: 100%;
    position: relative;
}
.pai{
width: 20%;
position: absolute;
transition: all 1s ease-in;
border:1px solid saddlebrown;
}

重点

点击事件，传数组1的值，找到在数组2中位置，进行替换顺序操作

// 测试
        fanpai(val){
            let num=this.testArr2.indexOf(val)
            let copyList=JSON.parse(JSON.stringify(this.testArr2))
           copyList.splice(num,1)
            copyList.unshift(val)
            this.testArr2=copyList
        }

循环数组1，通过动态的left值，来进行位置变换。在数组2中所在的索引值，就是他的位置

<div class="testBox">
            <div class="pai"  :style="{left:((testArr2.indexOf(item))*20)+'%'}" v-for="(item,index) in testArr" :key="index" @click="fanpai(item)">{{item}}</div>
        </div>

完整代码

<template>
        <div class="testBox">
            <div class="pai"  :style="{left:((testArr2.indexOf(item))*20)+'%'}" v-for="(item,index) in testArr" :key="index" 
            @click="fanpai(item)">{{item}}</div>
        </div>
</template>
<script>
export default {
data(){
        return{
          testArr:[
                0,1,2,3,4
            ],
            testArr2:[
                0,1,2,3,4
            ]
    }
}
methods: {
fanpai(val){
            console.log(val)
            let num=this.testArr2.indexOf(val)
            let copyList=JSON.parse(JSON.stringify(this.testArr2))
           copyList.splice(num,1)
            copyList.unshift(val)
            this.testArr2=copyList
            console.log(this.testArr2)
        }
  }
}
</script>
<style scoped>
.testBox{
    height: 600px;
    width: 100%;
    position: relative;
}
.pai{
width: 20%;
position: absolute;
transition: all 1s ease-in;
border:1px solid saddlebrown;
}
</style>