Vue & SCSS problem with keyframe animations

  css, javascript, sass, vue.js

I’m trying to use this button animation https://codepen.io/aaroniker/pen/dyoKeMP in a vue component, but the animations don’t seem to work.
The button gets styles as expected, and I’ve replaced the javascript to use Vue methods, so the animation and active classes get added to the button correctly.

I’m not quite sure what the problem is, but I suspect it may have to do with the variables in the styling.

Do I need to add a specific preProcessor? I have the suspicion it’s probably a problem with the variable names/how they are called, but not quite sure what I need to change them to, so any nudge in the right direction would be greatly appreciated 🙂

My style looks like this:

<style lang="scss" scoped>
.grid-list {
  --color: #f6f8ff;
  --background: #2b3044;
  --background-hover: #1ee235;
  --icon-color: #bbc1e1;
  padding: 6px 12px 6px 8px;
  margin: 0;
  display: flex;
  outline: none;
  position: relative;
  border: none;
  border-radius: 9px;
  background: var(--b, var(--background));
  cursor: pointer;
  -webkit-appearence: none;
  -webkit-tap-highlight-color: transparent;
  transform: scale(var(--scale, 1)) translateZ(0);
  transition: transform 0.15s, background 0.4s;
  &:active {
    --scale: 0.95;
  }
  &:hover {
    --b: var(--background-hover);
  }
  .icon {
    width: 24px;
    height: 24px;
    position: relative;
    i {
      position: absolute;
      left: var(--left, 4px);
      top: var(--top, 4px);
      display: block;
      border-radius: 2px;
      width: var(--width, 7px);
      height: var(--height, 7px);
      background: var(--icon-color);
      animation: var(--name, var(--dots-name, none))
        var(--duration, var(--dots-duration, 0.5s))
        var(--easing, var(--dots-easing, linear)) forwards
        var(--delay, var(--dots-delay, 0s));
    }
    .dots {
      i {
        &:nth-child(1) {
          --x-middle: -8px;
          --y-middle: 10px;
          --x-end: -2px;
          --y-end: 12px;
          --x-back: 10px;
          --y-back: 7px;
          --x-back-end: 9px;
          --y-back-end: 0;
        }
        &:nth-child(2) {
          --left: 13px;
          --x-middle: -12px;
          --y-middle: 5px;
          --x-end: -11px;
          --y-end: 7px;
          --x-back: -3px;
          --y-back: 1px;
          --x-back-end: -9px;
          --y-back-end: 0;
        }
        &:nth-child(3) {
          --top: 13px;
          --x-middle: 4px;
          --y-middle: -5px;
          --x-end: -2px;
          --y-end: -7px;
          --x-back: -5px;
          --y-back: 0px;
          --x-back-end: 9px;
          --y-back-end: 0;
        }
        &:nth-child(4) {
          --left: 13px;
          --top: 13px;
          --x-middle: 0;
          --y-middle: -10px;
          --x-end: -11px;
          --y-end: -12px;
          --x-back: -14px;
          --y-back: -8px;
          --x-back-end: -9px;
          --y-back-end: 0;
        }
      }
    }
    .lines {
      --name: var(--lines-name, none);
      --duration: var(--lines-duration, 0.15s);
      --easing: var(--lines-easing, linear);
      --delay: var(--lines-delay, 0s);
      i {
        --left: 9px;
        --top: 3px;
        --height: 2px;
        --width: 11px;
        transform: translateY(20%) translateZ(0) scaleX(0);
        &:nth-child(2) {
          --top: 8px;
        }
        &:nth-child(3) {
          --top: 13px;
        }
        &:nth-child(4) {
          --top: 18px;
        }
      }
    }
  }
  .text {
    margin-left: 4px;
    position: relative;
    line-height: 24px;
    font-weight: 600;
    font-size: 14px;
    min-width: 28px;
    color: var(--color);
    span {
      --y-default: 0;
      --o-default: 1;
      --y-active: -12px;
      --o-active: 0;
      display: block;
      opacity: var(--o-default);
      transform: translateY(var(--y-default)) translateZ(0);
      animation: var(--span-name, none) 0.4s ease forwards;
      &:last-child {
        --y-default: 12px;
        --o-default: 0;
        --y-active: 0;
        --o-active: 1;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
  &.animation {
    --span-name: text;
    --dots-name: back;
    --lines-name: scale-down;
    .lines {
      i {
        transform-origin: 0 50%;
        &:nth-child(3),
        &:nth-child(4) {
          transform-origin: 100% 50%;
        }
      }
    }
    &.active {
      --span-name: text-active;
      --dots-name: move;
      --lines-name: scale;
      --lines-duration: 0.15s;
      --lines-delay: 0.3s;
      .lines {
        i {
          transform-origin: 100% 50%;
          &:nth-child(3),
          &:nth-child(4) {
            transform-origin: 0 50%;
          }
        }
      }
    }
  }
}

@keyframes text {
  0% {
    opacity: var(--o-active);
    transform: translateY(var(--y-active)) translateZ(0);
  }
  100% {
    opacity: var(--o-default);
    transform: translateY(var(--y-default)) translateZ(0);
  }
}

@keyframes text-active {
  0% {
    opacity: var(--o-default);
    transform: translateY(var(--y-default)) translateZ(0);
  }
  100% {
    opacity: var(--o-active);
    transform: translateY(var(--y-active)) translateZ(0);
  }
}

@keyframes move {
  50% {
    transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(0.4);
  }
  100% {
    transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
  }
}

@keyframes back {
  0%,
  15% {
    transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(0.4);
  }
  50% {
    transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(0.5);
  }
  100% {
    transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
  }
}

@keyframes scale {
  100% {
    transform: translateY(20%) translateZ(0) scaleX(1);
  }
}

@keyframes scale-down {
  0% {
    transform: translateY(20%) translateZ(0) scaleX(1);
  }
  100% {
    transform: translateY(20%) translateZ(0) scaleX(0);
  }
}
</style>

Source: Ask Javascript Questions

LEAVE A COMMENT