feat: 优化一系列问题 #146

- 重构进入动画逻辑 #146 - 精简部分代码 - 优化部分动画 - 新增部分设置项
imsyy · Aug 16, 2023 · c12ddfb · c12ddfb
1 parent fe10751
commit c12ddfb
Show file tree

Hide file tree

Showing 48 changed files with 502 additions and 458 deletions.
diff --git a/index.html b/index.html
@@ -17,9 +17,8 @@
  <title>%VITE_SITE_NAME%</title>
  <!-- HarmonyOS Sans -->
  <!-- 本站 CDN 已开启防盗链，非本站域名不可访问，请更改链接为下方内容，否则自定义字体将失效 -->
- <!-- https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css -->
- <link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" />
- <link rel="stylesheet" href="/loading/loading.min.css">
+ <link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
+ <!-- <link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" /> -->
  <!-- IE Out -->
  <script>
  if ( /*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode))
@@ -28,23 +27,7 @@
  </script>
 </head>
 
-<body class="loading">
- <!--加载动画-->
- <div id="loading-box">
- <div class="loading-left-bg"></div>
- <div class="loading-right-bg"></div>
- <div class="spinner-box">
- <div class="loader">
- <div class="inner one"></div>
- <div class="inner two"></div>
- <div class="inner three"></div>
- </div>
- <div class="loading-word">
- <p class="loading-title" id="loading-title">%VITE_SITE_NAME%</p>
- <span id="loading-text">加载中</span>
- </div>
- </div>
- </div>
+<body>
  <!-- 主体内容 -->
  <div id="app"></div>
  <!-- noscript -->

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
  "github": "https://github.com/imsyy/home",
  "home": "https://imsyy.top",
  "private": true,
- "version": "4.0.5",
+ "version": "4.1.0",
  "type": "module",
  "scripts": {
  "dev": "vite --host",

diff --git a/public/images/background1.jpg b/public/images/background1.jpg
diff --git a/public/images/background1.webp b/public/images/background1.webp
diff --git a/public/images/background10.jpg b/public/images/background10.jpg
diff --git a/public/images/background10.webp b/public/images/background10.webp
diff --git a/public/images/background2.jpg b/public/images/background2.jpg
diff --git a/public/images/background2.webp b/public/images/background2.webp
diff --git a/public/images/background3.jpg b/public/images/background3.jpg
diff --git a/public/images/background3.webp b/public/images/background3.webp
diff --git a/public/images/background4.jpg b/public/images/background4.jpg
diff --git a/public/images/background4.webp b/public/images/background4.webp
diff --git a/public/images/background5.jpg b/public/images/background5.jpg
diff --git a/public/images/background5.webp b/public/images/background5.webp
diff --git a/public/images/background6.jpg b/public/images/background6.jpg
diff --git a/public/images/background6.webp b/public/images/background6.webp
diff --git a/public/images/background7.jpg b/public/images/background7.jpg
diff --git a/public/images/background7.webp b/public/images/background7.webp
diff --git a/public/images/background8.jpg b/public/images/background8.jpg
diff --git a/public/images/background8.webp b/public/images/background8.webp
diff --git a/public/images/background9.jpg b/public/images/background9.jpg
diff --git a/public/images/background9.webp b/public/images/background9.webp
diff --git a/public/loading/loading.css b/public/loading/loading.css
diff --git a/public/loading/loading.min.css b/public/loading/loading.min.css
diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,13 @@
 <template>
- <div class="animate">
- <Background />
- <main>
+ <!-- 加载 -->
+ <Loading />
+ <!-- 壁纸 -->
+ <Background @loadComplete="loadComplete" />
+ <!-- 主界面 -->
+ <Transition name="fade" mode="out-in">
+ <main id="main" v-if="store.imgLoadStatus">
  <div class="container" v-show="!store.backgroundShow">
- <section class="main" v-show="!store.setOpenState">
+ <section class="all" v-show="!store.setOpenState">
  <MainLeft />
  <MainRight v-show="!store.boxOpenState" />
  <Box v-show="store.boxOpenState" />
@@ -24,26 +28,28 @@
  >
  <component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" />
  </Icon>
+ <!-- 页脚 -->
+ <Transition name="fade" mode="out-in">
+ <Footer v-show="!store.backgroundShow && !store.setOpenState" />
+ </Transition>
  </main>
- <Footer v-show="!store.backgroundShow && !store.setOpenState" />
- </div>
+ </Transition>
 </template>
 <script setup>
-import { onMounted, onBeforeUnmount, watch } from "vue";
+import { onMounted, onBeforeUnmount, watch, nextTick } from "vue";
 import { helloInit, checkDays } from "@/utils/getTime.js";
+import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
 import { mainStore } from "@/store";
 import { Icon } from "@vicons/utils";
-import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
+import Loading from "@/components/Loading.vue";
 import MainLeft from "@/views/Main/Left.vue";
 import MainRight from "@/views/Main/Right.vue";
-import Background from "@/components/Background/index.vue";
-import Footer from "@/components/Footer/index.vue";
+import Background from "@/components/Background.vue";
+import Footer from "@/components/Footer.vue";
 import Box from "@/views/Box/index.vue";
 import MoreSet from "@/views/MoreSet/index.vue";
 import cursorInit from "@/utils/cursor.js";
 import config from "@/../package.json";
-// 新春灯笼
-// import "@/utils/lantern.js";
 
 const store = mainStore();
 
@@ -52,22 +58,29 @@ const getWidth = () => {
  store.setInnerWidth(window.innerWidth);
 };
 
-onMounted(() => {
- // 自定义鼠标
- cursorInit();
- // 加载完成事件
- window.addEventListener("load", () => {
- console.log("加载完成");
- // 去除加载标记
- document.getElementsByTagName("body")[0].className = "";
- // 给加载动画添加结束标记
- const loadingBox = document.getElementById("loading-box");
- loadingBox.classList.add("loaded");
+// 加载完成事件
+const loadComplete = () => {
+ nextTick(() => {
  // 欢迎提示
  helloInit();
  // 默哀模式
  checkDays();
  });
+};
+
+// 监听宽度变化
+watch(
+ () => store.innerWidth,
+ (value) => {
+ if (value < 990) {
+ store.boxOpenState = false;
+ }
+ }
+);
+
+onMounted(() => {
+ // 自定义鼠标
+ cursorInit();
 
  // 屏蔽右键
  document.oncontextmenu = () => {
@@ -116,31 +129,23 @@ onMounted(() => {
  );
 });
 
-// 监听宽度变化
-watch(
- () => store.innerWidth,
- (value) => {
- if (value < 990) {
- store.boxOpenState = false;
- }
- }
-);
-
 onBeforeUnmount(() => {
  window.removeEventListener("resize", getWidth);
 });
 </script>
 
 <style lang="scss" scoped>
-main {
+#main {
+ transform: scale(1.2);
+ transition: transform 0.3s;
+ animation: fade-blur-main-in 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+ forwards;
+ animation-delay: 0.5s;
  .container {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
- @media (max-width: 1200px) {
- padding: 0 2vw;
- }
- .main {
+ .all {
  width: 100%;
  height: 100%;
  padding: 0 0.75rem;
@@ -158,8 +163,10 @@ main {
  background-color: #00000080;
  backdrop-filter: blur(20px);
  z-index: 2;
- animation: fade;
- -webkit-animation: fade 0.5s;
+ animation: fade 0.5s;
+ }
+ @media (max-width: 1200px) {
+ padding: 0 2vw;
  }
  }
  .menu {
@@ -174,9 +181,8 @@ main {
  background: rgb(0 0 0 / 20%);
  backdrop-filter: blur(10px);
  border-radius: 6px;
- transition: all 0.3s;
- animation: fade;
- -webkit-animation: fade 0.5s;
+ transition: transform 0.3s;
+ animation: fade 0.5s;
  &:active {
  transform: scale(0.95);
  }
@@ -188,23 +194,4 @@ main {
  }
  }
 }
-
-// 加载动画层
-.animate {
- transform: scale(1);
- transition: all ease 1.25s;
- opacity: 1;
- filter: blur(0);
- width: 100%;
- height: 100%;
-}
-
-.loading {
- .animate {
- transform: scale(1.2);
- transition: all ease 1.25s;
- opacity: 0;
- filter: blur(10px);
- }
-}
 </style>