Spin animation not work. Please Help

Hello i want to make spin animation work like on this Pen https://codepen.io/killerek/pen/ObBOJE when user click on Open button but not work.

My Script

<script>
import { ref, nextTick } from 'vue'; // Import nextTick from Vue

export default {
  data() {
    return {
     img: {
      blue:
        'https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpopujwezhhwszYI2gS09-5mpSEguXLPr7Vn35c18lwmO7Eu9TwjVbs8xVqZm_3J4TGcVU3YFCE-Ae5weq81JXovJXLyiRjvyFw4nfD30vgN-NX6nY/360fx360f',
      purple:
        'http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgposr-kLAtl7PLZTjlH7du6kb-FlvD1DLfYkWNF18lwmO7Eu46h2QS1r0tvZjvyLI-RIwI6aV7X_ADrwevmhZO0up_AwSM1uHNw5nzD30vgQ0tV-jw/360fx360f',
      pink:
        'https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgposr-kLAtl7PLZTjlH_9mkgIWKkPvxDLDEm2JS4Mp1mOjG-oLKhF2zowcDPzixc9OLcw82ZlyF8wC8wb251MW4tcifmydi7CEn4HiPlhyy1BxJbeNshqPIHELeWfJvK5CfiA/360fx360f',
      red:
        'https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV09-5gZKKkPLLMrfFqWZU7Mxkh9bN9J7yjRrhrUFuazjzJteVJlQ6NVHTrFe3wObs15G06picwHFnvid25C3bnhSzn1gSOQz0szG-/360fx360f',
      yellow:
        'http://vignette4.wikia.nocookie.net/cswikia/images/a/ad/Csgo-default_rare_item.png/revision/latest?cb=20150227163025',
    },
      cards: [],
      timings: [
        'easeInOutBack',
        'easeOutExpo',
        'easeInOutBounce',
        'easeOutQuad',
        'swing',
        'easeOutElastic',
        'easeInOutElastic',
      ],
      marginLeft: '-1000px',
      cardElementStyle: {
        backgroundColor: 'red',
      },
    };
  },
  methods: {
    reset() {
      this.cards = [];
      for (let i = 0; i < 210; i++) {
        let rarity = 'blue';
        let rand = this.random(1, 10000) / 100;
        if (rand < 20) rarity = 'purple';
        if (rand < 5) rarity = 'pink';
        if (rand < 2) rarity = 'red';
        if (rand < 0.5) rarity = 'yellow';
        this.cards.push({
          img: this.img[rarity],
          background: 'background-color: ' + rarity,
          rarity: rarity,
        });
      }
      nextTick(() => {
        this.marginLeft = '-1000px';
      });
    },
    openCase() {
      this.reset();
      const rand = this.random(1000, 20000);
      const childNumber = Math.floor(rand / 100) + 4;
      const timing = this.timings[this.random(0, this.timings.length)];
      const mywidth = ((rand * 100) / screen.width) * 2;

      this.animate('marginLeft', -mywidth + '%', 2000, timing, () => {
        this.$nextTick(() => {
          const cardToAnimate = this.$refs['itemNumber' + childNumber];
          if (cardToAnimate) {
            cardToAnimate.style.backgroundColor  = 'green';
          }
        });
      });

      // this.cardElementStyle.backgroundColor = 'red';
      // const cardElement = this.$refs.card;
      // if (cardElement) {
      //   console.log(cardElement)
      //   cardElement.style.backgroundColor = 'green';
      // }
    },
    animate(property, value, duration, timing, callback) {
      this[property] = value;
      setTimeout(() => {
        if (callback) callback();
      }, duration);
    },
    random(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
  },
};
</script>

CSS + HTML

<template>
 <div id="cardList">
        <div
          class="card"
          :style="'background-color: ' + card.background"
          :data-rarity="card.rarity"
          :id = "'itemNumber' + index"
          :ref="'itemNumber' + index"
          v-for="(card, index) in cards"
        >
          <img :src="card.img" />
        </div>
      </div>
      <button @click="openCase">Open Case</button>
    
</template>
<style>
#cardList {
  height: 100px;
  width: 800px;
  position: relative;
  border: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
}

.card {
  display: inline-block;
  background-color: red;
  text-align: center;
  border-left: 1px solid black;
  border-right: 1px solid black;
  width: 100px;
  height: 100px;
}

.card > img {
  width: 100px;
  height: 100px;
}

.arrow-down {
  margin-left: 380px;
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}
#dialog-msg > img {
  width: 150px;
  height: 150px;
}
#dialog-msg {
  text-align: center;
}
</style>