Changeset 35406 for main/trunk

Timestamp:

2021-09-15T14:35:57+12:00 (3 years ago)

Author:

cstephen

Message:

Implement cleaner transcription removal transitions

Location:

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src

Files:

• App.vue (modified) (2 diffs)
• components/TranscriptionItem.vue (modified) (4 diffs)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/App.vue

@@ -12 +12 @@
 
     <ul class="list-view">
-        <li class="list-item" v-for="[id, transcription] in transcriptions" :key="id">
-            <TranscriptionItem :transcription="transcription" @playAudio="playAudio($event)" />
-        </li>
+        <transition-group name="transcription-list">
+            <li class="list-item transcription-list-item" v-for="[id, transcription] in transcriptions" :key="id">
+                <TranscriptionItem :transcription="transcription" @playAudio="playAudio($event)" />
+            </li>
+        </transition-group>
     </ul>
 </template>
@@ -55 +57 @@
     transform: translate(0, -100%);
     opacity: 0;
+}
+
+.transcription-list-item {
+    transition: all 0.8s ease;
+}
+
+.transcription-list-leave-to {
+    opacity: 0;
+    transform: translateX(30%);
+}
+
+.transcription-list-leave-active {
+  position: absolute;
 }
 </style>

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue

@@ -1 +1 @@
 <template>
-    <div class="card" :class="{ 'transform-slideout-up': isDeleted }">
+    <div class="card">
         <!-- Header containing info and actions for the transcription -->
         <div class="transcription__header">
@@ -97 +97 @@
 import TranscriptionItemEditor, { getWords } from "./TranscriptionItemEditor.vue"
 import { TranscriptionViewModel } from "../main";
-import Util from "../js/Util";
 
 export default {
@@ -110 +109 @@
     data() {
         return {
-            isDeleted: false,
             showEditor: false,
             showDownloadOptions: false
@@ -126 +124 @@
         },
         remove() {
-            this.isDeleted = true;
-            // Start our removal animation and give it some time to complete
-            Util.delay(550).then(() => this.$store.commit("transcriptionRemove", this.transcription.id));
+            this.$store.commit("transcriptionRemove", this.transcription.id);
         },
         downloadAsText() {