搜索结果列表页面开发

src/components/Star/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <Icon v-show="!animRunning" :name="active ? 'gt-plane-star-yellow' : 'gt-plane-star'" />
+    <div v-show="animRunning" class="anim-container overflow-visible relative">
+      <div class="star absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 mt-[0.15em]"
+           @animationend="animationend"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { type IStar } from './types';
+const ANIM_END = 'animEnd';
+const props = defineProps<IStar>();
+const emits = defineEmits<{(event: typeof ANIM_END): void}>();
+const animRunning = ref(false);
+watch(() => props.runAnimation, (newValue) => {
+  if (animRunning.value) {
+    return;
+  }
+  animRunning.value = newValue;
+});
+
+function animationend() {
+  animRunning.value = false;
+  emits(ANIM_END);
+}
+</script>
+
+<style lang="scss" scoped>
+.anim-container {
+  width: 16px;
+  height: 16px;
+}
+
+.star {
+  cursor: pointer;
+  height: 50px;
+  width: 50px;
+  background-image: url('@/assets/imgs/anim/star.png');
+  background-position: left;
+  background-repeat: no-repeat;
+  background-size: 3600%;
+  animation: frames 1s steps(35, start) 1 forwards;
+}
+
+@keyframes frames {
+  from {
+    background-position: left;
+  }
+  to {
+    background-position: right;
+  }
+}
+</style>

src/components/Star/types.ts

@@ -0,0 +1,4 @@
+export interface IStar{
+    active: boolean;
+    runAnimation?: boolean;
+}