JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app">
  <button class="right" @click="show = !show">Click</button>
  <button class="svg">
    <svg fill="#000" viewBox="0 0 24 24" stroke="3px">
      <Transition
        v-for="(d, name) in paths"
        :name="`forward${name}`"
      >
        <path v-if="show" :d="d" />
      </Transition>
    </svg>
  </button>
</div>

SCSS

.svg {
  > svg {
    height: 2rem;
    width: auto;
  }
  [class*="forward"] {
    $fadeIn: 0.2s fade-in;
    &[class*="-enter-active"] {
      animation: $fadeIn;
      opacity: 0;
    }
    &[class*="-leave-active"] {
      animation: $fadeIn reverse;
    }
  }
  [class*="-active"] {
    &[class*="forwardTwo"] {
      animation-delay: 0.3s;
    }
    &[class*="forwardThree"] {
      animation-delay: 0.6s;
    }
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

JavaScript

const { createApp, ref } = Vue;
createApp({
  setup: () => ({
    show: ref(false),
    paths: {
      Three: "M15.14,5.46V18.57l8.32-6.64ZM15.87,7l6.42,5-6.42,5.12Z",
      Two: "M15.51,11.37l-.37-.28L7.86,5.43V18.54l7.28-5.81.73-.58v-.49ZM8.6,17V6.92l6.41,5Z",
      One: "M8.23,11.41l-.37-.29L.54,5.43V18.54l7.32-5.85.37-.29.37-.3v-.41ZM1.28,17V6.92l6.41,5Z"
    }
  })
}).mount("#app");