feat: nav bar animate

This commit is contained in:
2026-02-04 22:28:00 +08:00
parent e9b38b48e9
commit e0d8cd6cb5
6 changed files with 149 additions and 47 deletions

View File

@@ -0,0 +1,33 @@
# 动画
## 使用
:::warning 警告
motion-v 的自动引入系统经过测试无法使用,您仍需要手动引入
:::
Hucky 安装了 [motion-v](https://motion.net.cn/docs/vue) 库,您可以在组件中使用它来添加动画效果。
简单来看,您只需要引入 motion-v 的 `motion` 组件,并使用它来包裹需要添加动画效果的元素,然后编写 :animate 指令即可。
```html
<motion.div :animate="{ rotate: 360 }" />
```
您也可以通过设置 :initial 指令来设置元素的初始状态。
```html
<motion.div :animate="{ rotate: 360 }" :initial="{ rotate: 0 }" />
```
通过 `AnimatePresence` 组件,您可以在元素进入或退出时添加动画效果。
```html
<AnimatePresence>
<motion.div v-if="show" :exit="{ opacity: 0 }" />
</AnimatePresence>
```
:::tip 提示
exit 会自动为元素的进入也添加动画效果。
:::

View File

@@ -0,0 +1,34 @@
# 辅助工具
## 使用
Hucky 安装了 [Radash](https://radash.uihtm.com/) 库,用于辅助处理数组、对象、字符串等数据。
您可以自行查询文档来了解更多用法。
## 节流
在查阅 Radash 文档时发现其 `throttle` 函数的使用存在错误,在这里补充纠正,在文档中的用法如下:
```ts
import { throttle } from 'radash'
const throttledScroll = throttle(() => {
console.log('Scroll event handled')
}, 100)
window.addEventListener('scroll', throttledScroll)
// 滚动时函数最多每100ms执行一次
```
事实上 `throttle` 函数的第一个参数才是节流时间,第二个参数是函数。正确写法应该如下:
```ts
import { throttle } from 'radash'
const throttledScroll = throttle(100, () => {
console.log('Scroll event handled')
})
window.addEventListener('scroll', throttledScroll)
```