Change dragging transition

Signed-off-by: dartcafe <github@dartcafe.de>

1 files changed, 24 insertions, 2 deletions

diff --git a/src/js/components/Options/OptionsText.vue b/src/js/components/Options/OptionsText.vue
index d0b62647..5562d010 100644
--- a/src/js/components/Options/OptionsText.vue
+++ b/src/js/components/Options/OptionsText.vue
@@ -23,8 +23,12 @@
 <template>
 	<div>
 		<OptionsTextAdd v-if="!closed" />
-		<draggable v-if="countOptions" v-model="reOrderedOptions">
-			<transition-group>
+		<draggable v-if="countOptions"
+			v-model="reOrderedOptions"
+			v-bind="dragOptions"
+			@start="drag = true"
+			@end="drag = false">
+			<transition-group type="transition" :name="!drag ? 'flip-list' : null">
 				<OptionItem v-for="(option) in reOrderedOptions"
 					:key="option.id"
 					:option="option"
@@ -92,6 +96,7 @@ export default {
 	data() {
 		return {
 			pollType: 'textPoll',
+			drag: false,
 		}
 	},
 
@@ -108,6 +113,15 @@ export default {
 			pollTypeIcon: 'poll/typeIcon',
 		}),
 
+		dragOptions() {
+			return {
+				animation: 200,
+				group: 'description',
+				disabled: false,
+				ghostClass: 'ghost',
+			}
+		},
+
 		reOrderedOptions: {
 			get() {
 				return this.options
@@ -134,6 +148,14 @@ export default {
 		}
 	}
 
+	.flip-list-move {
+		transition: transform 0.5s;
+	}
+
+	.no-move {
+		transition: transform 0s;
+	}
+
 	.submit-option {
 		width: 30px;
 		background-color: transparent;