Changeset 35406
- Timestamp:
- 2021-09-15T14:35:57+12:00 (3 years ago)
- Location:
- main/trunk/model-interfaces-dev/atea/korero-maori-asr/src
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/App.vue
r35355 r35406 12 12 13 13 <ul class="list-view"> 14 <li class="list-item" v-for="[id, transcription] in transcriptions" :key="id"> 15 <TranscriptionItem :transcription="transcription" @playAudio="playAudio($event)" /> 16 </li> 14 <transition-group name="transcription-list"> 15 <li class="list-item transcription-list-item" v-for="[id, transcription] in transcriptions" :key="id"> 16 <TranscriptionItem :transcription="transcription" @playAudio="playAudio($event)" /> 17 </li> 18 </transition-group> 17 19 </ul> 18 20 </template> … … 55 57 transform: translate(0, -100%); 56 58 opacity: 0; 59 } 60 61 .transcription-list-item { 62 transition: all 0.8s ease; 63 } 64 65 .transcription-list-leave-to { 66 opacity: 0; 67 transform: translateX(30%); 68 } 69 70 .transcription-list-leave-active { 71 position: absolute; 57 72 } 58 73 </style> -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue
r35405 r35406 1 1 <template> 2 <div class="card" :class="{ 'transform-slideout-up': isDeleted }">2 <div class="card"> 3 3 <!-- Header containing info and actions for the transcription --> 4 4 <div class="transcription__header"> … … 97 97 import TranscriptionItemEditor, { getWords } from "./TranscriptionItemEditor.vue" 98 98 import { TranscriptionViewModel } from "../main"; 99 import Util from "../js/Util";100 99 101 100 export default { … … 110 109 data() { 111 110 return { 112 isDeleted: false,113 111 showEditor: false, 114 112 showDownloadOptions: false … … 126 124 }, 127 125 remove() { 128 this.isDeleted = true; 129 // Start our removal animation and give it some time to complete 130 Util.delay(550).then(() => this.$store.commit("transcriptionRemove", this.transcription.id)); 126 this.$store.commit("transcriptionRemove", this.transcription.id); 131 127 }, 132 128 downloadAsText() {
Note:
See TracChangeset
for help on using the changeset viewer.