Convert Js Animation to Vue.Js (Stars Rating)

  animation, css, javascript, vue.js

I am trying to transcribe this stars rating project in Vue.js.
Can someone help me?
I made an initial attempt, but there is a piece of code I just don’t know how to handle.
This is the project: stars rating

saveRating(e, liIndex) {
  let li = e.currentTarget;
  let ul = li.parentElement;
  let rating = ul.parentElement;
  let last = null;
  let lastIndex = null;
  for (let i = 0; i < ul.childElementCount; i++) {
    let child = ul.children[i];
    if (child.classList.contains("current")) {
      last = child;
      lastIndex = i;
    }
  }

  if (!rating.classList.contains("animate-left") && !rating.classList.contains("animate-right")) {
    last.classList.remove("current");

    for (let y = 0; y < ul.childElementCount; y++) {
      let current = ul.children[y];
      if (y > liIndex) {
        current.classList.add("active");

        if (liIndex > lastIndex) {
          rating.classList.add("animate-right");
        } else {
          rating.classList.remove("animate-left");
        }
      }
    }

    // rating.css({
    //     '--x': li.position().left + 'px'
    // });
    li.classList.add("move-to");
    last.classList.add("move-from");

    setTimeout(() => {
      li.classList.add("current");
      li.classList.remove("move-to");
      last.classList.remove("move-from");
      rating.classList.remove("animate-left");
      rating.classList.remove("animate-right");
    }, 800);
  }
},

Source: Ask Javascript Questions

LEAVE A COMMENT