Animations

2022-02-15 22:35:30 +01:00
parent 903bc35bd3
commit ba01bba5dc
6 changed files with 105 additions and 74 deletions
@@ -1,61 +1,68 @@
 <template>
-  <TransitionGroup name="slide_up">
-    <div
-      class="mb-2 text-center"
-      v-for="(op, i) in operations"
-      :style="{ transitionDelay: `${transDelay * (operations.length - i)}ms` }"
-      :key="i">
-      <div class="inline-block relative text-xl">
-        <!-- OPERATION -->
-        <div
-          class="flex items-center"
-          :class="{ 'text-red-600': isOperationInvalid(op) }">
-          <!-- LEFT -->
-          <div class="w-[2.5em] border-b border-stone-600 transition-all">
-            {{ op.left?.value ?? '&nbsp;' }}
-          </div>
-          <!-- RIGHT -->
-          <div class="w-[2.5em] border-b border-stone-600 transition-all">
-            {{ op.operator ?? '&nbsp;' }}
-          </div>
+  <div>
+    <TransitionGroup name="slide_up">
+      <div
+        class="mb-2 text-center"
+        v-for="(op, i) in operations"
+        :style="{
+          transitionDelay: `${transDelay * (operations.length - i)}ms`,
+        }"
+        :key="i">
+        <div class="inline-block relative text-xl">
+          <!-- OPERATION -->
+          <div
+            class="flex items-center"
+            :class="{ 'text-red-600': isOperationInvalid(op) }">
+            <!-- LEFT -->
+            <div class="w-[2.5em] border-b border-stone-600 transition-all">
+              {{ op.left?.value ?? '&nbsp;' }}
+            </div>
+            <!-- RIGHT -->
+            <div class="w-[2.5em] border-b border-stone-600 transition-all">
+              {{ op.operator ?? '&nbsp;' }}
+            </div>

-          <div class="w-[2.5em] border-b border-stone-600 transition-all">
-            {{ op.right?.value ?? '&nbsp;' }}
+            <div class="w-[2.5em] border-b border-stone-600 transition-all">
+              {{ op.right?.value ?? '&nbsp;' }}
+            </div>
+
+            <!-- EQUALS -->
+            <div class="mx-4 border-none">
+              =
+            </div>
+
+            <!-- RESULT -->
+            <PlaquetteBox
+              :dynamic-size="true"
+              class="w-[3.2em] h-8 border-none">
+              <IconSad v-if="isOperationInvalid(op)" />
+              <span
+                v-else-if="
+                  op.operator &&
+                    op.left &&
+                    op.right &&
+                    isOperationResultValid(op)
+                ">
+                {{ operate(op.operator, op.left.value, op.right.value) }}
+              </span>
+              <span v-else>?</span>
+            </PlaquetteBox>
+
+            <!-- UNDO -->
+            <button
+              class="ml-8"
+              @click="undoOperation(i)">
+              <IconUndo
+                class="text-stone-400"
+                :class="{
+                  invisible: !canOperationBeDeleted(op),
+                }" />
+            </button>
          </div>
-
-          <!-- EQUALS -->
-          <div class="mx-4 border-none">
-            =
-          </div>
-
-          <!-- RESULT -->
-          <PlaquetteBox
-            :dynamic-size="true"
-            class="w-[3.2em] h-8 border-none">
-            <IconSad v-if="isOperationInvalid(op)" />
-            <span
-              v-else-if="
-                op.operator && op.left && op.right && isOperationResultValid(op)
-              ">
-              {{ operate(op.operator, op.left.value, op.right.value) }}
-            </span>
-            <span v-else>?</span>
-          </PlaquetteBox>
-
-          <!-- UNDO -->
-          <button
-            class="ml-8"
-            @click="undoOperation(i)">
-            <IconUndo
-              class="text-stone-400"
-              :class="{
-                invisible: !canOperationBeDeleted(op),
-              }" />
-          </button>
        </div>
      </div>
-    </div>
-  </TransitionGroup>
+    </TransitionGroup>
+  </div>
 </template>

 <script setup lang="ts">