✨ feat(首页入口背景): 测试动画效果

hookehuyr
Commit c11cb3c7e6ddaed2b8a2bc3312616ea69ef92ab8 c11cb3c7 1 parent 556a256a
Showing 5 changed files with 41 additions and 4 deletions
index.html
package-lock.json
package.json
src/views/client/index.vue
yarn.lock
--- a/index.html
View file @c11cb3c
+++ b/index.html
View file @c11cb3c
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
   <title></title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css" />
 </head>
 <body>
   <div id="app"></div>
--- a/package-lock.json
View file @c11cb3c
+++ b/package-lock.json
View file @c11cb3c
@@ -8,6 +8,7 @@
       "name": "tjws",
       "version": "1.0.0",
       "dependencies": {
+        "animate.css": "^4.1.1",
         "html2canvas": "^1.4.1",
         "jquery": "^3.6.0",
         "js-cookie": "^3.0.1",
@@ -286,6 +287,11 @@
       "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==",
       "license": "MIT"
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -1933,6 +1939,11 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
       "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
--- a/package.json
View file @c11cb3c
+++ b/package.json
View file @c11cb3c
@@ -14,6 +14,7 @@
     "publish": "npm run build && npm run rm && npm run mv && npm run git && npm run update"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "html2canvas": "^1.4.1",
     "jquery": "^3.6.0",
     "js-cookie": "^3.0.1",
--- a/src/views/client/index.vue
View file @c11cb3c
+++ b/src/views/client/index.vue
View file @c11cb3c
 <template>
   <div class="client-index-page">
     <div class="cloud-bg"></div>
+    <!-- TAG: animate 动画 -->
+    <!-- <transition name="fade" enter-active-class="animated animate__swing" leave-active-class="animated animate__swing">
+      <van-icon v-if="show" :name="icon_subscribed" size="5rem" style="position: absolute; top: 50%;" />
+    </transition> -->
   </div>
-
   <div class="entry-wrapper">
-    <p style="color: #B8B8B8; margin: 1rem; margin-bottom: 0;">请选择您的身份</p>
+    <p class="text">请选择您的身份</p>
     <div class="control">
       <div class="plain">
         <my-button type="custom" :custom-style="styleObject1" @on-click="goVisit">访客</my-button>
@@ -18,13 +21,15 @@
 <script setup>
 import Cookies from 'js-cookie'
+import 'animate.css';
+import icon_subscribed from '@images/icon-dingyue01@2x.png'
 import MyButton from '@/components/MyButton/index.vue'
 import $ from 'jquery';
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import { Toast } from 'vant';
-import { nextTick, onMounted, reactive } from 'vue'
+import { nextTick, onMounted, reactive, ref } from 'vue'
 const $route = useRoute();
 const $router = useRouter();
@@ -57,6 +62,15 @@ onMounted (() => {
   // 背景颜色全屏
   $('.client-index-page').height($(document).height());
 })
+
+// TEMP：临时测试动画效果
+// const show = ref(true);
+// const interval = setInterval(() => { // 图标动画效果
+//   show.value = !show.value
+// }, 1000);
+// onBeforeRouteLeave(() => {
+//   clearInterval(interval); // 清除调用
+// })
 </script>
 <script>
@@ -91,6 +105,11 @@ export default {
     position: absolute;
     bottom: 0;
     width: 100%;
+    .text {
+      color: #B8B8B8; 
+      margin: 1rem; 
+      margin-bottom: 0;
+    }
     .control {
       margin: 1rem;
       margin-top: 0.5rem;
--- a/yarn.lock
View file @c11cb3c
+++ b/yarn.lock
View file @c11cb3c
@@ -175,6 +175,11 @@
   "resolved" "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz"
   "version" "3.2.31"
+"animate.css@^4.1.1":
+  "integrity" "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+  "resolved" "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz"
+  "version" "4.1.1"
+
 "ansi-styles@^3.2.1":
   "integrity" "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA=="
   "resolved" "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"