Resolve #5857

CHANGELOG.md

@@ -1,6 +1,11 @@
 ChangeLog
 =========
 
+unreleased
+--------------------
+### ✨Improvements
+* UIのアニメーションを無効にできるように
+
 12.1.0 (2020/02/06)
 --------------------
 ### ✨Improvements

locales/ja-JP.yml

@@ -350,6 +350,7 @@ post: "投稿"
 posted: "投稿しました"
 autoReloadWhenDisconnected: "サーバー切断時に自動リロード"
 autoNoteWatch: "ノートの自動ウォッチ"
+reduceUiAnimation: "UIのアニメーションを減らす"
 
 _2fa:
   registerDevice: "デバイスを登録"

src/client/app.vue

@@ -2,10 +2,10 @@
 <div class="mk-app" v-hotkey.global="keymap">
 	<header class="header">
 		<div class="title" ref="title">
-			<transition name="header" mode="out-in" appear>
+			<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
 				<button class="_button back" v-if="canBack" @click="back()"><fa :icon="faChevronLeft"/></button>
 			</transition>
-			<transition name="header" mode="out-in" appear>
+			<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
 				<div class="body" :key="pageKey">
 					<div class="default">
 						<portal-target name="avatar" slim/>
@@ -76,7 +76,7 @@
 	<div class="contents">
 		<main ref="main">
 			<div class="content">
-				<transition name="page" mode="out-in" @enter="onTransition">
+				<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
 					<keep-alive :include="['index']">
 						<router-view></router-view>
 					</keep-alive>

src/client/components/modal.vue

@@ -1,9 +1,9 @@
 <template>
 <div class="mk-modal">
-	<transition name="bg-fade" appear>
+	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
 		<div class="bg" ref="bg" v-if="show" @click="close()"></div>
 	</transition>
-	<transition name="modal" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
+	<transition :name="$store.state.device.animation ? 'modal' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
 		<div class="content" ref="content" v-if="show" @click.self="close()"><slot></slot></div>
 	</transition>
 </div>

src/client/components/popup.vue

@@ -1,9 +1,9 @@
 <template>
 <div class="mk-popup">
-	<transition name="bg-fade" appear>
+	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
 		<div class="bg" ref="bg" @click="close()" v-if="show"></div>
 	</transition>
-	<transition name="popup" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
+	<transition :name="$store.state.device.animation ? 'popup' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
 		<div class="content" :class="{ fixed }" ref="content" v-if="show" :style="{ width: width ? width + 'px' : 'auto' }"><slot></slot></div>
 	</transition>
 </div>

src/client/components/post-form-dialog.vue

@@ -1,10 +1,10 @@
 <template>
 <div class="ulveipglmagnxfgvitaxyszerjwiqmwl">
-	<transition name="form-fade" appear>
+	<transition :name="$store.state.device.animation ? 'form-fade' : ''" appear>
 		<div class="bg" ref="bg" v-if="show" @click="close()"></div>
 	</transition>
 	<div class="main" ref="main" @click.self="close()" @keydown="onKeydown">
-		<transition name="form" appear
+		<transition :name="$store.state.device.animation ? 'form' : ''" appear
 			@after-leave="destroyDom"
 		>
 			<x-post-form ref="form"

src/client/components/sequential-entrance.vue

@@ -1,5 +1,5 @@
 <template>
-<transition-group
+<transition-group v-if="$store.state.device.animation"
 	name="staggered-fade"
 	tag="div"
 	:css="false"
@@ -11,6 +11,9 @@
 >
 	<slot></slot>
 </transition-group>
+<div v-else>
+	<slot></slot>
+</div>
 </template>
 
 <script lang="ts">

src/client/pages/settings/general.vue

@@ -22,6 +22,11 @@
 		<mk-button @click="readAllUnreadNotes">{{ $t('mark-as-read-all-unread-notes') }}</mk-button>
 		<mk-button @click="readAllMessagingMessages">{{ $t('mark-as-read-all-talk-messages') }}</mk-button>
 	</div>
+	<div class="_content">
+		<mk-switch v-model="reduceAnimation">
+			{{ $t('reduceUiAnimation') }}
+		</mk-switch>
+	</div>
 </section>
 </template>
 
@@ -60,6 +65,11 @@ export default Vue.extend({
 			get() { return this.$store.state.device.autoReload; },
 			set(value) { this.$store.commit('device/set', { key: 'autoReload', value }); }
 		},
+
+		reduceAnimation: {
+			get() { return !this.$store.state.device.animation; },
+			set(value) { this.$store.commit('device/set', { key: 'animation', value: !value }); }
+		},
 	},
 
 	methods: {

src/client/pages/user/index.vue

@@ -4,7 +4,7 @@
 	<portal to="avatar" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal>
 	
 	<div class="remote-caution _panel" v-if="user.host != null"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $t('remoteUserCaution') }}<a :href="user.url" rel="nofollow noopener" target="_blank">{{ $t('showOnRemote') }}</a></div>
-	<transition name="zoom" mode="out-in" appear>
+	<transition :name="$store.state.device.animation ? 'zoom' : ''" mode="out-in" appear>
 		<div class="profile _panel" :key="user.id">
 			<div class="banner-container" :style="style">
 				<div class="banner" ref="banner" :style="style"></div>

src/client/store.ts

@@ -29,6 +29,7 @@ const defaultDeviceSettings = {
 	localOnly: false,
 	themes: [],
 	theme: 'light',
+	animation: true,
 };
 
 export default (os: MiOS) => new Vuex.Store({