diff --git a/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/InstructionStep.vue b/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/InstructionStep.vue
index 0dcc6064..2b9caf6c 100644
--- a/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/InstructionStep.vue
+++ b/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/InstructionStep.vue
@@ -8,7 +8,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'InstructionSteps', // Define component name for empty component for Vue build and ESLint compatibility.
+  // Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125.
 });
 </script>
 
diff --git a/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/InstructionSteps.vue b/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/InstructionSteps.vue
index d44dbe33..630baa0b 100644
--- a/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/InstructionSteps.vue
+++ b/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/InstructionSteps.vue
@@ -8,6 +8,6 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'InstructionSteps', // Define component name for empty component for Vue build and ESLint compatibility.
+  // Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125.
 });
 </script>
diff --git a/src/presentation/components/Scripts/View/Cards/CardExpandTransition.vue b/src/presentation/components/Scripts/View/Cards/CardExpandTransition.vue
new file mode 100644
index 00000000..f5fdcecb
--- /dev/null
+++ b/src/presentation/components/Scripts/View/Cards/CardExpandTransition.vue
@@ -0,0 +1,28 @@
+<template>
+  <transition name="card-expand-collapse-transition">
+    <slot />
+  </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  // Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125.
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+.card-expand-collapse-transition-enter-active {
+  transition:
+    opacity 0.3s ease-in-out,
+    max-height 0.3s ease-in-out;
+}
+
+.card-expand-collapse-transition-enter-from {
+  opacity: 0; // Fade-in
+  max-height: 0; // Expand
+}
+</style>
diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
index 5ddd0d92..dd1e6035 100644
--- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
@@ -3,7 +3,6 @@
     ref="cardElement"
     class="card"
     :class="{
-      'is-collapsed': !isExpanded,
       'is-inactive': activeCategoryId && activeCategoryId !== categoryId,
       'is-expanded': isExpanded,
     }"
@@ -29,20 +28,26 @@
         :category-id="categoryId"
       />
     </div>
-    <div class="card__expander" @click.stop>
-      <div class="card__expander__close-button">
-        <FlatButton
-          icon="xmark"
-          @click="collapse()"
-        />
+    <CardExpandTransition>
+      <div
+        v-show="isExpanded"
+        class="card__expander"
+        @click.stop
+      >
+        <div class="card__expander__close-button">
+          <FlatButton
+            icon="xmark"
+            @click="collapse()"
+          />
+        </div>
+        <div class="card__expander__content">
+          <ScriptsTree
+            :category-id="categoryId"
+            :has-top-padding="false"
+          />
+        </div>
       </div>
-      <div class="card__expander__content">
-        <ScriptsTree
-          :category-id="categoryId"
-          :has-top-padding="false"
-        />
-      </div>
-    </div>
+    </CardExpandTransition>
   </div>
 </template>
 
@@ -56,6 +61,7 @@ import { injectKey } from '@/presentation/injectionSymbols';
 import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
 import { sleep } from '@/infrastructure/Threading/AsyncSleep';
 import CardSelectionIndicator from './CardSelectionIndicator.vue';
+import CardExpandTransition from './CardExpandTransition.vue';
 
 export default defineComponent({
   components: {
@@ -63,6 +69,7 @@ export default defineComponent({
     AppIcon,
     CardSelectionIndicator,
     FlatButton,
+    CardExpandTransition,
   },
   props: {
     categoryId: {
@@ -134,8 +141,6 @@ $expanded-margin-top    : 30px;
 $card-horizontal-gap    : $card-gap;
 
 .card {
-  transition: all 0.2s ease-in-out;
-
   &__inner {
     padding-top: $card-inner-padding;
     padding-right: $card-inner-padding;
@@ -149,7 +154,7 @@ $card-horizontal-gap    : $card-gap;
     width: 100%;
     text-transform: uppercase;
     text-align: center;
-    transition: all 0.2s ease-in-out;
+    transition: transform 0.2s ease-in-out;
 
     display:flex;
     flex-direction: column;
@@ -160,9 +165,6 @@ $card-horizontal-gap    : $card-gap;
       color: $color-on-secondary;
       transform: scale(1.05);
     }
-    &:after {
-      transition: all 0.3s ease-in-out;
-    }
     .card__inner__title {
       display: flex;
       flex-direction: column;
@@ -185,7 +187,6 @@ $card-horizontal-gap    : $card-gap;
     }
   }
   .card__expander {
-    transition: all 0.2s ease-in-out;
     position: relative;
     background-color: $color-primary-darker;
     color: $color-on-primary;
@@ -214,22 +215,6 @@ $card-horizontal-gap    : $card-gap;
     }
   }
 
-  &.is-collapsed {
-    .card__inner {
-      &:after {
-        content: "";
-        opacity: 0;
-      }
-    }
-
-    .card__expander {
-      max-height: 0;
-      min-height: 0;
-      overflow: hidden;
-      opacity: 0;
-    }
-  }
-
   &.is-expanded {
     .card__inner {
       height: auto;
@@ -249,7 +234,6 @@ $card-horizontal-gap    : $card-gap;
 
     .card__expander {
       margin-top: $expanded-margin-top;
-      opacity: 1;
     }
 
     @include hover-or-touch {