💫 (interval) add animation to plus and minus

src/assets/minus.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="icon icon-tabler icon-tabler-minus"
+  width="44"
+  height="44"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="#2c3a47"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path stroke="none" d="M0 0h24v24H0z" />
+  <line x1="5" y1="12" x2="19" y2="12" />
+</svg>

src/assets/plus.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="icon icon-tabler icon-tabler-plus"
+  width="44"
+  height="44"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="#2c3a47"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path stroke="none" d="M0 0h24v24H0z" />
+  <line x1="12" y1="5" x2="12" y2="19" />
+  <line x1="5" y1="12" x2="19" y2="12" />
+</svg>

src/components/IntervalInput.vue

@@ -1,41 +1,18 @@
 <template>
   <div class="interval-input">
-    <button v-show="editable" @click="minus">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="icon icon-tabler icon-tabler-minus"
-        width="44"
-        height="44"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="#2c3a47"
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" />
-        <line x1="5" y1="12" x2="19" y2="12" />
-      </svg>
-    </button>
-    <h2>{{ label }}</h2>
-    <button v-show="editable" @click="plus">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="icon icon-tabler icon-tabler-plus"
-        width="44"
-        height="44"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="#2c3a47"
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" />
-        <line x1="12" y1="5" x2="12" y2="19" />
-        <line x1="5" y1="12" x2="19" y2="12" />
-      </svg>
-    </button>
+    <transition name="fade" mode="out-in">
+      <button v-show="editable" @click="minus">
+        <img key="minus" src="@/assets/minus.svg" alt="minus" />
+      </button>
+    </transition>
+    <transition name="fade" mode="out-in">
+      <h2>{{ label }}</h2>
+    </transition>
+    <transition name="fade" mode="out-in">
+      <button v-show="editable" @click="plus">
+        <img key="plus" src="@/assets/plus.svg" alt="plus" />
+      </button>
+    </transition>
   </div>
 </template>
 
@@ -48,18 +25,16 @@ export default defineComponent({
   props: {
     editable: { type: Boolean, required: true }
   },
-  setup(props) {
+  setup() {
     const { interval, minInterval, minus, plus } = useInterval()
 
     const label = computed(() => {
       if (interval.value > 1) {
-        return props.editable
-          ? `${interval.value} minutes`
-          : `${interval.value} minute session`
+        return `${interval.value} minute session`
       }
 
       if (interval.value === minInterval) {
-        return props.editable ? '30 seconds' : '30 second session'
+        return '30 second session'
       }
 
       return `${interval.value} minute`

src/styles/app.scss

@@ -54,7 +54,7 @@ a {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.3s ease;
+  transition: opacity 0.25s ease;
 }
 .fade-enter,
 .fade-leave-to {

src/views/Home.vue

@@ -24,12 +24,16 @@
             v-if="timeState === 'stopped'"
             src="@/assets/play.svg"
             alt="play"
+            width="44px"
+            height="44px"
           />
           <img
             key="pause"
             v-if="timeState === 'started'"
             src="@/assets/pause.svg"
             alt="pause"
+            width="44px"
+            height="44px"
           />
         </transition>
       </button>
@@ -140,11 +144,4 @@ footer {
   font-style: italic;
   font-size: 1rem;
 }
-
-$button-size: 44px;
-
-button {
-  width: $button-size;
-  height: $button-size;
-}
 </style>