feat: Add transition effect for reordering questions

Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud · Mar 14, 2023 · b08192c · b08192c
1 parent 2cc001b
commit b08192c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
@@ -33,7 +33,7 @@
 			:class="{'question__drag-handle--shiftup': shiftDragHandle}"
 			:aria-label="t('forms', 'Drag to reorder the questions')"
 			role="button">
-			<NcButton ref="buttonU"
+			<NcButton ref="buttonUp"
 				:aria-label="t('forms', 'Move question up')"
 				:disabled="!canMoveUp"
 				type="tertiary-no-background"
@@ -262,7 +262,7 @@ export default {
 		},
 		onMoveUp() {
 			this.$emit('move-up')
-			this.$nextTick(() => this.$refs.buttonU.$el.focus())
+			this.$nextTick(() => this.$refs.buttonUp.$el.focus())
 		},
 
 		/**
@@ -305,6 +305,7 @@ export default {
 	margin-bottom: 80px;
 	padding-left: 44px;
 	user-select: none;
+	transition: var(--animation-slow);
 	background-color: var(--color-main-background);
 
 	> * {

diff --git a/src/views/Create.vue b/src/views/Create.vue
@@ -87,19 +87,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 -->
@@ -448,6 +450,10 @@ export default {
 <style lang="scss" scoped>
 @import '../scssmixins/markdownOutput';
 
+.nomove {
+	transition: none!important;
+}
+
 .app-content {
 	display: flex;
 	align-items: center;