VueUiWheel improved animation

graphieros · Dec 18, 2023 · 63b65b7 · 63b65b7
1 parent 5a0603d
commit 63b65b7
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.28",
+  "version": "1.9.29",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

diff --git a/src/App.vue b/src/App.vue
@@ -3513,7 +3513,7 @@ const updateStep = ref(0);
         <h4 style="color: #5f8bee">Manual testing arena</h4>
       </div>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_wheel)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_wheel)" open>
         <template #title>VueUiWheel</template>
         <template #dev>
           <WheelTest

diff --git a/src/Box.vue b/src/Box.vue
@@ -2,6 +2,13 @@
 import { ref } from "vue";
 const showConfig = ref(false);
 
+const props = defineProps({
+    open: {
+        type: Boolean,
+        default: false
+    }
+})
+
 const emit = defineEmits(['copy'])
 
 const isCopying = ref(false);
@@ -18,7 +25,7 @@ function copy() {
 
 <template>
     <div style="width: 100%;margin-top:12px; background: #2A2A2A;">
-        <details>
+        <details :open="open">
             <summary style="user-select:none;cursor:pointer;height:30px;background:linear-gradient(to right, #2A2A2A, #1A1A1A);line-height:24px;font-size:24px;padding:12px;">
                 <span style="color:#42d392">
                     <slot name="title"></slot>

diff --git a/src/components/vue-ui-wheel.vue b/src/components/vue-ui-wheel.vue
@@ -195,6 +195,7 @@ defineExpose({
                 :stroke="tick.color"
                 :stroke-width="5"
                 :stroke-linecap="wheelConfig.style.chart.layout.wheel.ticks.rounded ? 'round' : 'butt'"
+                :class="{ 'vue-ui-tick-animated': wheelConfig.style.chart.animation.use && i <= activeValue }"
             />
             <circle 
                 v-if="wheelConfig.style.chart.layout.innerCircle.show"
@@ -230,4 +231,20 @@ defineExpose({
     user-select: none;
     position: relative;
 }
+.vue-ui-tick-animated {
+    animation: animate-tick 0.3s ease-in;
+    transform-origin: center;
+}
+
+@keyframes animate-tick {
+    0% {
+        stroke-width: 8;
+    }
+    80% {
+        stroke-width: 6;
+    }
+    100% {
+        stroke-width: 5;
+    }
+}
 </style>