From 75a1201d4f65cd124d98a86000f33876145957ef Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 27 Dec 2023 00:35:16 +0300 Subject: [PATCH] Add view transition --- app.vue | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/app.vue b/app.vue index 16ff71561..770079c23 100644 --- a/app.vue +++ b/app.vue @@ -22,17 +22,28 @@ export default { }, mounted() { this.themeChangeListener = (event) => { - this.$primevue.changeTheme(this.$appState.theme, event.theme, 'theme-link', () => { - this.$appState.theme = event.theme; - this.$appState.darkTheme = event.dark; - EventBus.emit('theme-change-complete', { theme: event.theme, dark: event.dark }); - }); + if (!document.startViewTransition) { + this.applyTheme(event); + + return; + } + + document.startViewTransition(() => this.applyTheme(event)); }; EventBus.on('theme-change', this.themeChangeListener); }, beforeUnmount() { EventBus.off('theme-change', this.themeChangeListener); + }, + methods: { + applyTheme(event) { + this.$primevue.changeTheme(this.$appState.theme, event.theme, 'theme-link', () => { + this.$appState.theme = event.theme; + this.$appState.darkTheme = event.dark; + EventBus.emit('theme-change-complete', { theme: event.theme, dark: event.dark }); + }); + } } };