From d2fc5a248b5005d640f26dd58ef6909a1bc6c282 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Tue, 10 Jan 2023 20:17:08 +0900 Subject: [PATCH] refactor(client): use css modules --- packages/frontend/src/ui/deck.vue | 50 +++++++++++++++----------- packages/frontend/src/ui/universal.vue | 4 ++- 2 files changed, 33 insertions(+), 21 deletions(-) diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue index 3414c45e6b..4876e63781 100644 --- a/packages/frontend/src/ui/deck.vue +++ b/packages/frontend/src/ui/deck.vue @@ -52,7 +52,12 @@ <button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button> </div> - <Transition :name="$store.state.animation ? 'menu-back' : ''"> + <Transition + :enter-active-class="$store.state.animation ? $style.transition_menuDrawerBg_enterActive : ''" + :leave-active-class="$store.state.animation ? $style.transition_menuDrawerBg_leaveActive : ''" + :enter-from-class="$store.state.animation ? $style.transition_menuDrawerBg_enterFrom : ''" + :leave-to-class="$store.state.animation ? $style.transition_menuDrawerBg_leaveTo : ''" + > <div v-if="drawerMenuShowing" :class="$style.menuBg" @@ -62,8 +67,15 @@ ></div> </Transition> - <Transition :name="$store.state.animation ? 'menu' : ''"> - <XDrawerMenu v-if="drawerMenuShowing" class="menu"/> + <Transition + :enter-active-class="$store.state.animation ? $style.transition_menuDrawer_enterActive : ''" + :leave-active-class="$store.state.animation ? $style.transition_menuDrawer_leaveActive : ''" + :enter-from-class="$store.state.animation ? $style.transition_menuDrawer_enterFrom : ''" + :leave-to-class="$store.state.animation ? $style.transition_menuDrawer_leaveTo : ''" + > + <div v-if="drawerMenuShowing" :class="$style.menu"> + <XDrawerMenu/> + </div> </Transition> <XCommon/> @@ -222,31 +234,29 @@ async function deleteProfile() { } </script> -<style lang="scss" scoped> -.menu-enter-active, -.menu-leave-active { +<style lang="scss" module> +.transition_menuDrawerBg_enterActive, +.transition_menuDrawerBg_leaveActive { + opacity: 1; + transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); +} +.transition_menuDrawerBg_enterFrom, +.transition_menuDrawerBg_leaveTo { + opacity: 0; +} + +.transition_menuDrawer_enterActive, +.transition_menuDrawer_leaveActive { opacity: 1; transform: translateX(0); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); } -.menu-enter-from, -.menu-leave-active { +.transition_menuDrawer_enterFrom, +.transition_menuDrawer_leaveTo { opacity: 0; transform: translateX(-240px); } -.menu-back-enter-active, -.menu-back-leave-active { - opacity: 1; - transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); -} -.menu-back-enter-from, -.menu-back-leave-active { - opacity: 0; -} -</style> - -<style lang="scss" module> .root { $nav-hide-threshold: 650px; // TODO: どこかに集約したい diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index dc8914aac4..a292379fef 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/packages/frontend/src/ui/universal.vue @@ -47,7 +47,9 @@ :enter-from-class="$store.state.animation ? $style.transition_menuDrawer_enterFrom : ''" :leave-to-class="$store.state.animation ? $style.transition_menuDrawer_leaveTo : ''" > - <XDrawerMenu v-if="drawerMenuShowing" :class="$style.menuDrawer"/> + <div v-if="drawerMenuShowing" :class="$style.menuDrawer"> + <XDrawerMenu/> + </div> </Transition> <Transition