From 46c35717d5d28d7603bc0d42ecc90b61f49cfb0b Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 14 Jul 2023 01:09:52 +0800
Subject: [PATCH] fix: initial fade-in effect for opacity not working

---
 src/contentScripts/views/App.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 1db4b625..4fe88930 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -35,6 +35,7 @@ const toggleDark = useToggle(isDark)
 const pages = { Home, Search, Anime, History, WatchLater, Favorites, Video }
 const isVideoPage = ref<boolean>(false)
 const mainAppRef = ref<HTMLElement>() as Ref<HTMLElement>
+const mainAppOpacity = ref<number>(0)
 
 const tooltipPlacement = computed(() => {
   if (settings.value.dockPosition === 'left')
@@ -99,8 +100,7 @@ watch(() => settings.value.wallpaperMaskOpacity, (newValue) => {
 onMounted(() => {
   nextTick(() => {
     setTimeout(() => {
-      if (mainAppRef.value)
-        mainAppRef.value.style.opacity = '1'
+      mainAppOpacity.value = 1
     }, 800)
   })
 
@@ -170,7 +170,7 @@ function setAppAppearance() {
     pos="absolute top-0 left-0" w-full h-full pointer-events-none will-change-contents bg="$bew-bg-mask" z--1
     :style="{ backdropFilter: `blur(${settings.wallpaperBlurIntensity}px)` }"
   />
-  <div ref="mainAppRef" text="$bew-text-1" transition="opacity duration-300" h-100vh overflow-y-scroll>
+  <div ref="mainAppRef" text="$bew-text-1" transition="opacity duration-300" h-100vh overflow-y-scroll :style="{ opacity: mainAppOpacity }">
     <div m-auto max-w="$bew-page-max-width" :style="{ opacity: showSettings ? 0.2 : 1 }">
       <Transition name="topbar">
         <Topbar