可点击的元素在hover时动效修改

package.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "axios": "^1.1.3",
     "core-js": "^3.8.3",
     "dayjs": "^1.11.7",

src/App.vue

@@ -42,6 +42,9 @@ export default {
     height: 72px;
     right: 30px;
     bottom: 70px;
+    &:hover {
+      transform: scale(1.1);
+    }
   }
 }
 </style>

src/main.js

@@ -9,6 +9,7 @@ import clickOutside from "@/directives/v-click-outside.js"
 import mitt from "mitt"
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import 'animate.css'
 // import 'viewerjs/dist/viewer.css'
 // import VueViewer from 'v-viewer'
 

src/utils.js

@@ -83,5 +83,23 @@ export default {
         y: posRaw.y * scale,
       }
     }
-  }
+  },
+  animateCSS(element, animation, prefix = 'animate__') {
+  // We create a Promise and return it
+    return new Promise((resolve, reject) => {
+      const animationName = `${prefix}${animation}`
+      const node = typeof element === 'string' ? document.querySelector(element) : element
+
+      node.classList.add(`${prefix}animated`, animationName)
+
+      // When the animation ends, we clean the classes and resolve the Promise
+      function handleAnimationEnd(event) {
+        event.stopPropagation()
+        node.classList.remove(`${prefix}animated`, animationName)
+        resolve('Animation ended')
+      }
+
+      node.addEventListener('animationend', handleAnimationEnd, { once: true })
+    })
+  },
 }

src/views/Bag.vue

@@ -48,7 +48,10 @@
       <p>每完成一节课，即可获得一块碎片</p>
       <p>收集碎片完成拼图游戏，解锁章节图纸</p>
       <p>解锁所有章节图纸，建设古镇</p>
-      <button class="build" />
+      <button
+        class="build"
+        @click="onClickBuild"
+      />
     </div>
   </div>
 </template>
@@ -120,6 +123,9 @@ export default {
   methods: {
     ...mapMutations([
     ]),
+    onClickBuild(e) {
+      utils.animateCSS(e.currentTarget, 'headShake')
+    }
   },
 }
 </script>

src/views/Home.vue

@@ -16,16 +16,19 @@
         @over="onStartUpOver"
       />
     </transition>
-    <div class="lion-male">
+    <button class="lion-male">
       <img
         class="lion"
         src="@/assets/images/lion-male.png"
         alt=""
         draggable="false"
       >
-    </div>
+    </button>
     <button
       class="lion-female"
+      :class="{
+        canScale: isHideMenu,
+      }"
       @click="isHideMenu = !isHideMenu"
     >
       <img
@@ -191,6 +194,9 @@ export default {
       width: 100%;
       height: 100%;
     }
+    &:hover {
+      transform: scale(1.1);
+    }
   }
   >.lion-female {
     position: absolute;
@@ -206,6 +212,9 @@ export default {
       height: 100%;
       z-index: 6;
     }
+    &.canScale:hover {
+      transform: scale(1.1);
+    }
   }
   >menu {
     position: absolute;
@@ -234,12 +243,13 @@ export default {
       cursor: pointer;
       counter-increment: counter-l2;
       >h2 {
+        width: fit-content;
         &::before {
           display: inline-block;
           content: '第' counter(counter-l2, cjk-decimal) '章';
         }
         &:hover {
-          color: #D11414;
+          transform: scale(1.1);
         }
       }
       >.level2 {
@@ -250,9 +260,10 @@ export default {
         line-height: 1.3;
         margin-bottom: 3px;
         >h3 {
+          width: fit-content;
           counter-increment: counter-l3;
           &:hover {
-            color: #D11414;
+            transform: scale(1.1);
           }
           &::before {
             display: inline-block;

src/views/Level2.vue

@@ -107,7 +107,7 @@ export default {
       justify-content: center;
       align-items: center;
       &:hover {
-        color: #D11414;
+        transform: scale(1.1);
       }
     }
     &.hide {

src/views/Level3.vue

@@ -161,6 +161,10 @@ export default {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    transform: scale(0.9);
+    &:hover {
+      transform: scale(0.99);
+    }
   }
   button.learn {
     position: absolute;
@@ -172,6 +176,10 @@ export default {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    transform: scale(0.9);
+    &:hover {
+      transform: scale(0.99);
+    }
   }
   button.record {
     position: absolute;
@@ -183,6 +191,10 @@ export default {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    transform: scale(0.9);
+    &:hover {
+      transform: scale(0.99);
+    }
   }
   .lion-wrapper {
     position: absolute;

src/views/Watch.vue

@@ -181,6 +181,9 @@ export default {
       width: 100%;
       z-index: 2;
       cursor: pointer;
+      &:hover {
+        transform: scale(1.1);
+      }
     }
   }
 }

yarn.lock

@@ -2009,6 +2009,11 @@ ajv@^8.0.0, ajv@^8.0.1, ajv@^8.9.0:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-colors@^4.1.1:
   version "4.1.3"
   resolved "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"