disable animations on more transitions (#8112)
This commit is contained in:
		
							parent
							
								
									3f610edc2a
								
							
						
					
					
						commit
						e51f59e1b7
					
				
					 23 changed files with 31 additions and 31 deletions
				
			
		|  | @ -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> | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
|  | @ -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 }} | ||||
|  |  | |||
|  | @ -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" | ||||
|  |  | |||
|  | @ -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" | ||||
|  |  | |||
|  | @ -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()"/> | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
|  | @ -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"> | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
|  | @ -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"> | ||||
|  |  | |||
|  | @ -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"> | ||||
|  |  | |||
|  | @ -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"/> | ||||
|  |  | |||
|  | @ -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"> | ||||
| 				<!-- | ||||
|  |  | |||
|  | @ -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"/> | ||||
| 
 | ||||
|  |  | |||
|  | @ -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> | ||||
| 
 | ||||
|  |  | |||
|  | @ -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> | ||||
| 
 | ||||
|  |  | |||
|  | @ -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> | ||||
| 
 | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
|  | @ -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"> | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue