create-keyframe-animation动画模块

<el-col :span="24" class="container">
  <el-col
    v-for="(item, index) in rollList"
    :key="item.order"
    class="roll-list"
  >
    <el-col
      class="roll-list-content"
      ref="rollListContent"
      :class="
        item.order < 4
          ? 'roll-list-content-first-color'
          : 'roll-list-content-color'
      "
    >
      <el-col :span="3" class="roll-item">
        <span v-if="item.order < 4">
          <img :src="badges[item.order - 1]" alt />
        </span>
        <span v-else>{{ item.order }}</span>
      </el-col>
      <el-col :span="5">
        <span>{{ index }}</span>
      </el-col>
    </el-col>
  </el-col>
</el-col>

import animations from "create-keyframe-animation"
import one from "../assets/img/stImg/1.png"
import two from "../assets/img/stImg/2.png"
import three from "../assets/img/stImg/3.png"
mounted() {
    this.rankingAnimation()
  },
	data() {
    	return {
			rollList: [
		        { order: 5, name: "10" },
		        { order: 2, name: "9" },
		        { order: 3, name: "6" },
		        { order: 1, name: "67" },
		        { order: 4, name: "4" },
		        { order: 6, name: "4" },
	        ],
      		badges: [one, two, three],
     	}
     }
  rankingAnimation() {
      let orderList = this.rollList.map((item) => {
        return item.order
      })
      var len = orderList.length

      //选择排序
      let nodeArr = []
      for (var i = 0; i < this.$refs.rollListContent.length; i++) {
        this.$refs.rollListContent[i].$el.style.top = i * 0.73 + "rem"

        nodeArr.push(this.$refs.rollListContent[i])
      }
      var site = 0
      let animation = {
        0: {
          background: "transparent",
          fontSize: "14px",
        },
        80: {
          background: "rgba(0, 186, 255, 0.2)",
          fontSize: "24px",
        },
        100: {
          background: "transparent",
          fontSize: "14px",
        },
      }

      animations.registerAnimation({
        name: "move",
        animation,
        presets: {
          duration: 2000, // 动画时长
          easing: "linear", // 动画曲线
        },
      })
      let run = () => {
        setTimeout(function() {
          var min = Number.MAX_VALUE
          var index = site
          for (var i = site; i < len; i++) {
            if (orderList[i] < min) {
              min = orderList[i]
              index = i
            }
          }
          var temp = orderList[index]
          orderList[index] = orderList[site]
          orderList[site] = temp
          //交换
          nodeArr[site].$el.style.top = index * 0.73 + "rem"
          if (site !== index) {
            animations.runAnimation(nodeArr[index].$el, "move")
          }
          nodeArr[index].$el.style.top = site * 0.73 + "rem"
          //交换
          temp = nodeArr[site]
          nodeArr[site] = nodeArr[index]
          nodeArr[index] = temp
          site++
          if (site < len) {
            run()
          }
        }, 500)
      }
      run()
    },

.container {
  display: flex;
  color: #c1f1ff;
  font-size: 14px;
  flex-flow: column;
  position: relative;

  .roll-list {
    height: 0.73rem;
    line-height: 0.73rem;
    border-bottom: 1px dashed rgba(19, 175, 240, 0.5);
    .roll-list-content-first-color {
      color: #ff8923;
    }
    .roll-list-content-color {
      color: #c0f0ff;
    }
    .roll-list-content {
      font-weight: bold;
      font-size: 0.21rem;
      position: absolute;
      transition: top 1s;
      .roll-item {
        flex: 1;
        text-align: center;
        img {
          width: 0.38rem;
        }
      }
    }
  }
}