From e51f59e1b74ec5f7fa642b618f09c9bc4f6f1b9a Mon Sep 17 00:00:00 2001 From: Johann150 <johann.galle@protonmail.com> Date: Tue, 25 Jan 2022 15:18:21 +0100 Subject: [PATCH] disable animations on more transitions (#8112) --- packages/client/src/components/form/suspense.vue | 2 +- packages/client/src/components/notification-toast.vue | 2 +- packages/client/src/components/toast.vue | 2 +- packages/client/src/components/ui/container.vue | 2 +- packages/client/src/components/ui/folder.vue | 2 +- packages/client/src/components/ui/pagination.vue | 2 +- packages/client/src/components/ui/tooltip.vue | 2 +- packages/client/src/components/url-preview-popup.vue | 2 +- packages/client/src/components/url-preview.vue | 2 +- packages/client/src/components/user-preview.vue | 2 +- packages/client/src/pages/gallery/post.vue | 2 +- packages/client/src/pages/messaging/messaging-room.vue | 2 +- packages/client/src/pages/my-groups/group.vue | 4 ++-- packages/client/src/pages/my-lists/list.vue | 4 ++-- packages/client/src/pages/note.vue | 2 +- packages/client/src/pages/page.vue | 2 +- packages/client/src/pages/user/index.vue | 2 +- packages/client/src/ui/classic.vue | 4 ++-- packages/client/src/ui/deck.vue | 4 ++-- packages/client/src/ui/universal.vue | 8 ++++---- packages/client/src/ui/visitor/b.vue | 4 ++-- packages/client/src/widgets/federation.vue | 2 +- packages/client/src/widgets/trends.vue | 2 +- 23 files changed, 31 insertions(+), 31 deletions(-) diff --git a/packages/client/src/components/form/suspense.vue b/packages/client/src/components/form/suspense.vue index 4d5debe604..2ad55dacae 100644 --- a/packages/client/src/components/form/suspense.vue +++ b/packages/client/src/components/form/suspense.vue @@ -1,5 +1,5 @@ <template> -<transition name="fade" mode="out-in"> +<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <div v-if="pending"> <MkLoading/> </div> diff --git a/packages/client/src/components/notification-toast.vue b/packages/client/src/components/notification-toast.vue index fbd8467a6e..b2ab1029ad 100644 --- a/packages/client/src/components/notification-toast.vue +++ b/packages/client/src/components/notification-toast.vue @@ -1,6 +1,6 @@ <template> <div class="mk-notification-toast" :style="{ zIndex }"> - <transition name="notification-toast" appear @after-leave="$emit('closed')"> + <transition :name="$store.state.animation ? 'notification-toast' : ''" appear @after-leave="$emit('closed')"> <XNotification v-if="showing" :notification="notification" class="notification _acrylic"/> </transition> </div> diff --git a/packages/client/src/components/toast.vue b/packages/client/src/components/toast.vue index 031aa45633..c114379716 100644 --- a/packages/client/src/components/toast.vue +++ b/packages/client/src/components/toast.vue @@ -1,6 +1,6 @@ <template> <div class="mk-toast"> - <transition name="toast" appear @after-leave="emit('closed')"> + <transition :name="$store.state.animation ? 'toast' : ''" appear @after-leave="emit('closed')"> <div v-if="showing" class="body _acrylic" :style="{ zIndex }"> <div class="message"> {{ message }} diff --git a/packages/client/src/components/ui/container.vue b/packages/client/src/components/ui/container.vue index fcd9f32290..7c595d8116 100644 --- a/packages/client/src/components/ui/container.vue +++ b/packages/client/src/components/ui/container.vue @@ -10,7 +10,7 @@ </button> </div> </header> - <transition name="container-toggle" + <transition :name="$store.state.animation ? 'container-toggle' : ''" @enter="enter" @after-enter="afterEnter" @leave="leave" diff --git a/packages/client/src/components/ui/folder.vue b/packages/client/src/components/ui/folder.vue index 9795b1d81a..fe1602b2bb 100644 --- a/packages/client/src/components/ui/folder.vue +++ b/packages/client/src/components/ui/folder.vue @@ -8,7 +8,7 @@ <template v-else><i class="fas fa-angle-down"></i></template> </button> </header> - <transition name="folder-toggle" + <transition :name="$store.state.animation ? 'folder-toggle' : ''" @enter="enter" @after-enter="afterEnter" @leave="leave" diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue index 9c18fc5ce5..13f3215671 100644 --- a/packages/client/src/components/ui/pagination.vue +++ b/packages/client/src/components/ui/pagination.vue @@ -1,5 +1,5 @@ <template> -<transition name="fade" mode="out-in"> +<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <MkLoading v-if="fetching"/> <MkError v-else-if="error" @retry="init()"/> diff --git a/packages/client/src/components/ui/tooltip.vue b/packages/client/src/components/ui/tooltip.vue index 2e48ab623e..394b068352 100644 --- a/packages/client/src/components/ui/tooltip.vue +++ b/packages/client/src/components/ui/tooltip.vue @@ -1,5 +1,5 @@ <template> -<transition name="tooltip" appear @after-leave="$emit('closed')"> +<transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="$emit('closed')"> <div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }"> <slot>{{ text }}</slot> </div> diff --git a/packages/client/src/components/url-preview-popup.vue b/packages/client/src/components/url-preview-popup.vue index c345bafcf9..5f3717ab91 100644 --- a/packages/client/src/components/url-preview-popup.vue +++ b/packages/client/src/components/url-preview-popup.vue @@ -1,6 +1,6 @@ <template> <div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }"> - <transition name="zoom" @after-leave="$emit('closed')"> + <transition :name="$store.state.animation ? 'zoom' : ''" @after-leave="$emit('closed')"> <MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/> </transition> </div> diff --git a/packages/client/src/components/url-preview.vue b/packages/client/src/components/url-preview.vue index bf3b358797..6c57957617 100644 --- a/packages/client/src/components/url-preview.vue +++ b/packages/client/src/components/url-preview.vue @@ -7,7 +7,7 @@ <iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&hideCard=false&hideThread=false&lang=en&theme=${$store.state.darkMode ? 'dark' : 'light'}&id=${tweetId}`"></iframe> </div> <div v-else v-size="{ max: [400, 350] }" class="mk-url-preview"> - <transition name="zoom" mode="out-in"> + <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in"> <component :is="self ? 'MkA' : 'a'" v-if="!fetching" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url"> <div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`"> <button v-if="!playerEnabled && player.url" class="_button" :title="$ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="fas fa-play-circle"></i></button> diff --git a/packages/client/src/components/user-preview.vue b/packages/client/src/components/user-preview.vue index f85a32fbe7..51c5330564 100644 --- a/packages/client/src/components/user-preview.vue +++ b/packages/client/src/components/user-preview.vue @@ -1,5 +1,5 @@ <template> -<transition name="popup" appear @after-leave="$emit('closed')"> +<transition :name="$store.state.animation ? 'popup' : ''" appear @after-leave="$emit('closed')"> <div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }"> <div v-if="fetched" class="info"> <div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div> diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue index fff2b6a74e..1755c23286 100644 --- a/packages/client/src/pages/gallery/post.vue +++ b/packages/client/src/pages/gallery/post.vue @@ -1,6 +1,6 @@ <template> <div class="_root"> - <transition name="fade" mode="out-in"> + <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <div v-if="post" class="rkxwuolj"> <div class="files"> <div v-for="file in post.files" :key="file.id" class="file"> diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue index 9a34551ddd..a715dad6de 100644 --- a/packages/client/src/pages/messaging/messaging-room.vue +++ b/packages/client/src/pages/messaging/messaging-room.vue @@ -24,7 +24,7 @@ </I18n> <MkEllipsis/> </div> - <transition name="fade"> + <transition :name="$store.state.animation ? 'fade' : ''"> <div v-show="showIndicator" class="new-message"> <button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-arrow-circle-down"></i>{{ $ts.newMessageExists }}</button> </div> diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue index c307f037a6..92c0483af9 100644 --- a/packages/client/src/pages/my-groups/group.vue +++ b/packages/client/src/pages/my-groups/group.vue @@ -1,6 +1,6 @@ <template> <div class="mk-group-page"> - <transition name="zoom" mode="out-in"> + <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in"> <div v-if="group" class="_section"> <div class="_content" style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <MkButton inline @click="invite()">{{ $ts.invite }}</MkButton> @@ -11,7 +11,7 @@ </div> </transition> - <transition name="zoom" mode="out-in"> + <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in"> <div v-if="group" class="_section members _gap"> <div class="_title">{{ $ts.members }}</div> <div class="_content"> diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue index a25522f933..bc24f58431 100644 --- a/packages/client/src/pages/my-lists/list.vue +++ b/packages/client/src/pages/my-lists/list.vue @@ -1,7 +1,7 @@ <template> <MkSpacer :content-max="700"> <div class="mk-list-page"> - <transition name="zoom" mode="out-in"> + <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in"> <div v-if="list" class="_section"> <div class="_content"> <MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton> @@ -11,7 +11,7 @@ </div> </transition> - <transition name="zoom" mode="out-in"> + <transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in"> <div v-if="list" class="_section members _gap"> <div class="_title">{{ $ts.members }}</div> <div class="_content"> diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue index 72ac85ee90..efeea345dc 100644 --- a/packages/client/src/pages/note.vue +++ b/packages/client/src/pages/note.vue @@ -1,7 +1,7 @@ <template> <MkSpacer :content-max="800"> <div class="fcuexfpr"> - <transition name="fade" mode="out-in"> + <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <div v-if="note" class="note"> <div v-if="showNext" class="_gap"> <XNotes class="_content" :pagination="next" :no-gap="true"/> diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue index 429d1ddea2..b2c039a269 100644 --- a/packages/client/src/pages/page.vue +++ b/packages/client/src/pages/page.vue @@ -1,6 +1,6 @@ <template> <MkSpacer :content-max="700"> - <transition name="fade" mode="out-in"> + <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh"> <div class="_block main"> <!-- diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue index 0b96368587..e767abf1ac 100644 --- a/packages/client/src/pages/user/index.vue +++ b/packages/client/src/pages/user/index.vue @@ -1,6 +1,6 @@ <template> <div> -<transition name="fade" mode="out-in"> +<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <div v-if="user && narrow === false" class="ftskorzw wide"> <MkRemoteCaution v-if="user.host != null" :href="user.url"/> diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue index cf2ad9cbf3..c61cbc433e 100644 --- a/packages/client/src/ui/classic.vue +++ b/packages/client/src/ui/classic.vue @@ -30,7 +30,7 @@ </div> </div> - <transition name="tray-back"> + <transition :name="$store.state.animation ? 'tray-back' : ''"> <div v-if="widgetsShowing" class="tray-back _modalBg" @click="widgetsShowing = false" @@ -38,7 +38,7 @@ ></div> </transition> - <transition name="tray"> + <transition :name="$store.state.animation ? 'tray' : ''"> <XWidgets v-if="widgetsShowing" class="tray"/> </transition> diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue index 73dc83180f..51a4853e9d 100644 --- a/packages/client/src/ui/deck.vue +++ b/packages/client/src/ui/deck.vue @@ -29,7 +29,7 @@ <button class="button post _button" @click="post()"><i class="fas fa-pencil-alt"></i></button> </div> - <transition name="menu-back"> + <transition :name="$store.state.animation ? 'menu-back' : ''"> <div v-if="drawerMenuShowing" class="menu-back _modalBg" @click="drawerMenuShowing = false" @@ -37,7 +37,7 @@ ></div> </transition> - <transition name="menu"> + <transition :name="$store.state.animation ? 'menu' : ''"> <XDrawerMenu v-if="drawerMenuShowing" class="menu"/> </transition> diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index 4b356f1511..16cc9a4f06 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -36,7 +36,7 @@ <button class="button post _button" @click="post()"><i class="fas fa-pencil-alt"></i></button> </div> - <transition name="menuDrawer-back"> + <transition :name="$store.state.animation ? 'menuDrawer-back' : ''"> <div v-if="drawerMenuShowing" class="menuDrawer-back _modalBg" @click="drawerMenuShowing = false" @@ -44,11 +44,11 @@ ></div> </transition> - <transition name="menuDrawer"> + <transition :name="$store.state.animation ? 'menuDrawer' : ''"> <XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer"/> </transition> - <transition name="widgetsDrawer-back"> + <transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''"> <div v-if="widgetsShowing" class="widgetsDrawer-back _modalBg" @click="widgetsShowing = false" @@ -56,7 +56,7 @@ ></div> </transition> - <transition name="widgetsDrawer"> + <transition :name="$store.state.animation ? 'widgetsDrawer' : ''"> <XWidgets v-if="widgetsShowing" class="widgetsDrawer"/> </transition> diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue index f6ad13d9a0..c9c0a1f72e 100644 --- a/packages/client/src/ui/visitor/b.vue +++ b/packages/client/src/ui/visitor/b.vue @@ -25,7 +25,7 @@ </div> </div> - <transition name="tray-back"> + <transition :name="$store.state.animation ? 'tray-back' : ''"> <div v-if="showMenu" class="menu-back _modalBg" @click="showMenu = false" @@ -33,7 +33,7 @@ ></div> </transition> - <transition name="tray"> + <transition :name="$store.state.animation ? 'tray' : ''"> <div v-if="showMenu" class="menu"> <MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA> <MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA> diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue index ed7350188e..4c43117e48 100644 --- a/packages/client/src/widgets/federation.vue +++ b/packages/client/src/widgets/federation.vue @@ -4,7 +4,7 @@ <div class="wbrkwalb"> <MkLoading v-if="fetching"/> - <transition-group v-else tag="div" name="chart" class="instances"> + <transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances"> <div v-for="(instance, i) in instances" :key="instance.id" class="instance"> <img v-if="instance.iconUrl" :src="instance.iconUrl" alt=""/> <div class="body"> diff --git a/packages/client/src/widgets/trends.vue b/packages/client/src/widgets/trends.vue index 5768a8d5d1..eb5eb4049f 100644 --- a/packages/client/src/widgets/trends.vue +++ b/packages/client/src/widgets/trends.vue @@ -4,7 +4,7 @@ <div class="wbrkwala"> <MkLoading v-if="fetching"/> - <transition-group v-else tag="div" name="chart" class="tags"> + <transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="tags"> <div v-for="stat in stats" :key="stat.tag"> <div class="tag"> <MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>