Merge pull request #367 from GateNLP/annotation-view-transition

Add transition effect when document changes
GateNLP · May 16, 2023 · 9502dcf · 9502dcf
2 parents a444750 + 0db010c
commit 9502dcf
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/frontend/src/views/Annotate.vue b/frontend/src/views/Annotate.vue
@@ -103,6 +103,7 @@
                               :doc_preannotation_field="currentAnnotationTask.document_pre_annotation_field"
                               :allow_document_reject="isLatestTask() && currentAnnotationTask.allow_document_reject"
                               :clear_after_submit="clearFormAfterSubmit"
+                              :class="{documentChanged : annotationRendererTransitionEnabled}"
                               @submit="submitHandler"
                               @reject="rejectHandler"
           ></AnnotationRenderer>
@@ -188,13 +189,20 @@ export default {
       showLeaveProjectModal: false,
       showStageIntroCard: false,
       showThankyouCard: false,
+      annotationRendererTransitionEnabled: false,
     }
   },
 
   methods: {
     ...mapActions(["getUserAnnotationTask", "getUserAnnotationTaskWithID",
       "completeUserAnnotationTask", "rejectUserAnnotationTask", "annotatorLeaveProject",
       "changeAnnotation"]),
+    triggerAnnotationRendererTransition(){
+      this.annotationRendererTransitionEnabled = true
+      setTimeout(()=>{
+        this.annotationRendererTransitionEnabled = false
+      }, 500)
+    },
     getAnnotationContainerBgClass() {
       return {
         "mt-4": true,
@@ -276,13 +284,16 @@ export default {
             this.$refs.annotationRenderer.setAnnotationData(this.currentAnnotationTask.annotation_data)
         }
 
+        this.triggerAnnotationRendererTransition()
+
       } catch (e) {
         toastError("Could not get annotation task", e, this)
         console.log(e)
       }
     },
     async submitHandler(value, time) {
 
+
       if (this.isLatestTask()) {
         // Complete a current task
         try {
@@ -313,6 +324,7 @@ export default {
     },
 
     async rejectHandler() {
+
       try {
         await this.rejectUserAnnotationTask(this.annotationTask.annotation_id)
       } catch (e) {
@@ -419,4 +431,17 @@ export default {
 
 }
 
+.documentChanged {
+  animation: fadein 0.5s;
+}
+
+@keyframes fadein {
+  from{
+    opacity: 0;
+  }
+  to{
+    opacity: 1.0;
+  }
+}
+
 </style>