From 56a2c2dc6d7d132b6d4cdf7cfeffe3cb20ea59fd Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 8 Nov 2023 17:24:07 +0900 Subject: [PATCH 1/3] Add slide transition Signed-off-by: Marco --- src/App.vue | 40 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/src/App.vue b/src/App.vue index ed544afa5..340b4e343 100644 --- a/src/App.vue +++ b/src/App.vue @@ -53,9 +53,12 @@ @@ -91,6 +94,7 @@ export default { showModal: false, page: 0, logoURL: imagePath('firstrunwizard', 'nextcloudLogo.svg'), + slideDirection: undefined, } }, @@ -141,13 +145,14 @@ export default { }, goToNextPage() { + this.slideDirection = 'slide-left' this.page++ }, goToPreviousPage() { + this.slideDirection = 'slide-right' this.page-- }, - }, } @@ -223,4 +228,31 @@ export default { display: none; } +.slide-right-enter-active, +.slide-right-leave-active, +.slide-left-enter-active, +.slide-left-leave-active{ + transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0); +} + +.slide-left-enter { + opacity: 0; + transform: translateX(30%); +} + +.slide-left-leave-to { + opacity: 0; + transform: translateX(-30%); +} + +.slide-right-enter { + opacity: 0; + transform: translateX(-30%); +} + +.slide-right-leave-to { + opacity: 0; + transform: translateX(30%); +} + From 76dafe0eeee89bcde10a2b454d94a0489ad54341 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 8 Nov 2023 18:02:43 +0900 Subject: [PATCH 2/3] Add background circle animation (phew!) Signed-off-by: Marco --- src/App.vue | 76 +++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 54 insertions(+), 22 deletions(-) diff --git a/src/App.vue b/src/App.vue index 340b4e343..9995d9630 100644 --- a/src/App.vue +++ b/src/App.vue @@ -34,7 +34,10 @@
-
+ +
+ +