From 3872c8f29e192e871d9a14c378f8b0d9279775e6 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Sat, 21 Jun 2025 23:53:33 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20Vue2=20=E8=BF=87=E6=B8=A1?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E4=B8=8E=20Animate.css=20=E6=95=B4=E5=90=88?= =?UTF-8?q?=E6=8C=87=E5=8D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue2-tutorials/single-file/demo2/package.json | 1 + .../single-file/demo2/pnpm-lock.yaml | 8 + vue2-tutorials/single-file/demo2/src/main.js | 1 + .../Vue2 过渡动画与 Animate.css 整合指南.md | 166 ++++++++++++++++++ .../demo2/src/views/demo10/index.vue | 24 ++- 5 files changed, 194 insertions(+), 6 deletions(-) create mode 100644 vue2-tutorials/single-file/demo2/src/views/demo10/Vue2 过渡动画与 Animate.css 整合指南.md diff --git a/vue2-tutorials/single-file/demo2/package.json b/vue2-tutorials/single-file/demo2/package.json index 7279fac..87fe210 100644 --- a/vue2-tutorials/single-file/demo2/package.json +++ b/vue2-tutorials/single-file/demo2/package.json @@ -9,6 +9,7 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "animate.css": "^4.1.1", "core-js": "^3.8.3", "nanoid": "^5.1.5", "vue": "^2.6.14", diff --git a/vue2-tutorials/single-file/demo2/pnpm-lock.yaml b/vue2-tutorials/single-file/demo2/pnpm-lock.yaml index 44747a6..5feb654 100644 --- a/vue2-tutorials/single-file/demo2/pnpm-lock.yaml +++ b/vue2-tutorials/single-file/demo2/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + animate.css: + specifier: ^4.1.1 + version: 4.1.1 core-js: specifier: ^3.8.3 version: 3.43.0 @@ -1034,6 +1037,9 @@ packages: ajv@8.17.1: resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==} + animate.css@4.1.1: + resolution: {integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==} + ansi-colors@4.1.3: resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==} engines: {node: '>=6'} @@ -5245,6 +5251,8 @@ snapshots: json-schema-traverse: 1.0.0 require-from-string: 2.0.2 + animate.css@4.1.1: {} + ansi-colors@4.1.3: {} ansi-escapes@3.2.0: {} diff --git a/vue2-tutorials/single-file/demo2/src/main.js b/vue2-tutorials/single-file/demo2/src/main.js index 295fc6e..94a097c 100644 --- a/vue2-tutorials/single-file/demo2/src/main.js +++ b/vue2-tutorials/single-file/demo2/src/main.js @@ -1,3 +1,4 @@ +import "animate.css"; import Vue from "vue"; import VueRouter from "vue-router"; import App from "./App.vue"; diff --git a/vue2-tutorials/single-file/demo2/src/views/demo10/Vue2 过渡动画与 Animate.css 整合指南.md b/vue2-tutorials/single-file/demo2/src/views/demo10/Vue2 过渡动画与 Animate.css 整合指南.md new file mode 100644 index 0000000..5862b4d --- /dev/null +++ b/vue2-tutorials/single-file/demo2/src/views/demo10/Vue2 过渡动画与 Animate.css 整合指南.md @@ -0,0 +1,166 @@ +# Vue2 过渡动画与 Animate.css 整合指南 + +## 一、Transition 与 TransitionGroup 对比 + +| 特性 | Transition | TransitionGroup | +| -------- | ----------------- | --------------- | +| 用途 | 单个元素/组件过渡 | 列表项过渡 | +| 要求 | 需要条件渲染 | 需要 `key` 属性 | +| 动画类 | 自动生成 | 可自定义类名 | +| 额外效果 | - | 自动处理定位 | + +## 二、Animate.css 集成方案 + +### 1. 基本集成方法 +```html + + + +``` + +### 2. 常用动画效果 +| 进入效果 | 离开效果 | 说明 | +| ---------------------- | ------------------------ | -------- | +| `animate__fadeIn` | `animate__fadeOut` | 淡入淡出 | +| `animate__zoomIn` | `animate__zoomOut` | 缩放效果 | +| `animate__slideInLeft` | `animate__slideOutRight` | 滑动效果 | +| `animate__flipInX` | `animate__flipOutX` | 3D翻转 | + +## 三、自定义动画与库动画结合 + +### 1. 混合使用示例 +```html + + +

自定义动画

+ + + + +
  • {{ item.text }}
    • +     +``` + +### 2. 动画性能优化 +```css +/* 启用GPU加速 */ +.animate__animated { + animation-duration: 0.5s; + backface-visibility: hidden; +} + +/* 限制动画影响范围 */ +.bunny-enter-active, .bunny-leave-active { + will-change: transform; + isolation: isolate; +} +``` + +## 四、最佳实践建议 + +### 1. 动画选择原则 +- **移动端**：使用较轻量的动画（如fade） +- **重要交互**：使用明显的反馈动画（如bounce） +- **连续操作**：保持动画风格一致 + +### 2. 时间控制技巧 +```javascript +// 动态控制动画时长 +data() { + return { + duration: window.innerWidth < 768 ? 300 : 500 + } +} +``` + +### 3. 无障碍访问 +```css +/* 减少运动偏好设置 */ +@media (prefers-reduced-motion: reduce) { + .animate__animated, + .bunny-enter-active, + .bunny-leave-active { + animation: none !important; + transition: none !important; + } +} +``` + +## 五、进阶应用场景 + +### 1. 路由过渡动画 +```html + + + + + +``` + +### 2. 状态驱动的动画 +```javascript +computed: { + animationClass() { + return this.isError + ? 'animate__shakeX' + : 'animate__tada' + } +} +``` + +### 3. 动画事件钩子 +```html + +
    内容
    +     + + +``` + +## 六、常见问题解决 + +1. **动画不连贯**： + - 使用 `mode="out-in"` 确保顺序执行 + - 检查 `key` 属性是否唯一 + +2. **初始渲染无动画**： + - 添加 `appear` 属性 + - 检查初始状态是否正确 + +3. **移动端性能差**： + - 减少动画复杂度 + - 使用 `will-change` 提示浏览器优化 + diff --git a/vue2-tutorials/single-file/demo2/src/views/demo10/index.vue b/vue2-tutorials/single-file/demo2/src/views/demo10/index.vue index 4ca312d..fbc633c 100644 --- a/vue2-tutorials/single-file/demo2/src/views/demo10/index.vue +++ b/vue2-tutorials/single-file/demo2/src/views/demo10/index.vue @@ -1,14 +1,26 @@