feat：利用延迟实现复杂动画

rzx007 · Jan 23, 2024 · 3a60310 · 3a60310
1 parent e4db857
commit 3a60310
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/docs/.vitepress/configs/sidebar.ts b/docs/.vitepress/configs/sidebar.ts
@@ -43,6 +43,7 @@ export const sidebar: DefaultTheme.Config['sidebar'] = {
         { text: '从剪贴板粘贴图像', link: '/html-dom/paste-an-image-from-the-clipboard' },
         { text: 'Canvas API 截取图片的一部分', link: '/html-dom/canvas-shotimg' },
         { text: '如何不使用`try-catch`处理异步错误', link: '/html-dom/await-to-js' },
+        { text: '利用延迟实现复杂动画', link: '/html-dom/annimation-by-delay' },
       ]
     },
     {

diff --git a/docs/code/demo/AnimationByDelay.vue b/docs/code/demo/AnimationByDelay.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="container">
+    <div class="ball" ref="ballRef"></div>
+    <input type="range" min="0" max="1" step="0.01" v-model="range" @input="changeFn">
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+const ballRef = ref<HTMLDivElement | null>(null)
+const range = ref(0.5)
+const changeFn = () => {
+  ballRef.value?.style.setProperty('--delay', `-${range.value}s`)
+  // ballRef.value!.style['animation-play-state'] = 'running'
+}
+onMounted(() => {
+  changeFn()
+})
+</script>
+<style>
+.container {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+
+.ball {
+  --delay: 0s;
+  width: 50px;
+  height: 50px;
+  background: red;
+  border-radius: 50%;
+  margin-bottom: 50px;
+  animation: move ease-in-out forwards 1s paused;
+  animation-delay: var(--delay);
+}
+
+@keyframes move {
+  50% {
+    transform: translateX(100px) scale(1.5);
+  }
+  to {
+    transform: translateX(200px) scale(0.8);
+  }
+}
+</style>
diff --git a/docs/html-dom/annimation-by-delay.md b/docs/html-dom/annimation-by-delay.md
@@ -0,0 +1,11 @@
+# 利用延迟实现复杂动画
+::: tip 思路
+巧用 `animation-delay` 负数实现复杂动画，上代码:
+:::
+
+<<< @/code/demo/AnimationByDelay.vue{vue}
+
+<script setup>
+  import AnimationByDelay from '../code/demo/AnimationByDelay.vue'
+</script>
+<AnimationByDelay />