feat: Add transition effect for reordering questions

Signed-off-by: Ferdinand Thiessen <[email protected]>

src/components/Questions/Question.vue

@@ -303,6 +303,7 @@ export default {
 	margin-bottom: 80px;
 	padding-left: 44px;
 	user-select: none;
+	transition: var(--animation-slow);
 	background-color: var(--color-main-background);
 
 	> * {

src/views/Create.vue

@@ -85,19 +85,21 @@
 				@change="onQuestionOrderChange"
 				@start="isDragging = true"
 				@end="isDragging = false">
-				<Questions :is="answerTypes[question.type].component"
-					v-for="(question, index) in form.questions"
-					ref="questions"
-					:key="question.id"
-					:can-move-down="index < (form.questions.length - 1)"
-					:can-move-up="index > 0"
-					:answer-type="answerTypes[question.type]"
-					:index="index + 1"
-					:max-string-lengths="maxStringLengths"
-					v-bind.sync="form.questions[index]"
-					@delete="deleteQuestion(question)"
-					@move-down="onMoveDown(index)"
-					@move-up="onMoveUp(index)" />
+				<transition-group :move-class="isDragging ? 'nomove' : undefined">
+					<Questions :is="answerTypes[question.type].component"
+						v-for="(question, index) in form.questions"
+						ref="questions"
+						:key="question.id"
+						:can-move-down="index < (form.questions.length - 1)"
+						:can-move-up="index > 0"
+						:answer-type="answerTypes[question.type]"
+						:index="index + 1"
+						:max-string-lengths="maxStringLengths"
+						v-bind.sync="form.questions[index]"
+						@delete="deleteQuestion(question)"
+						@move-down="onMoveDown(index)"
+						@move-up="onMoveUp(index)" />
+				</transition-group>
 			</Draggable>
 
 			<!-- Add new questions menu -->
@@ -444,6 +446,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.nomove {
+	transition: none!important;
+}
+
 .app-content {
 	display: flex;
 	align-items: center;