Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 3872c8f

Browse filesBrowse files
BunnyMasterBunnyMaster
committed
🎉 Vue2 过渡动画与 Animate.css 整合指南
1 parent 76ef5f7 commit 3872c8f
Copy full SHA for 3872c8f

File tree

Expand file treeCollapse file tree

5 files changed

+194
-6
lines changed
Filter options
Expand file treeCollapse file tree

5 files changed

+194
-6
lines changed

‎vue2-tutorials/single-file/demo2/package.json

Copy file name to clipboardExpand all lines: vue2-tutorials/single-file/demo2/package.json
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"lint": "vue-cli-service lint"
1010
},
1111
"dependencies": {
12+
"animate.css": "^4.1.1",
1213
"core-js": "^3.8.3",
1314
"nanoid": "^5.1.5",
1415
"vue": "^2.6.14",

‎vue2-tutorials/single-file/demo2/pnpm-lock.yaml

Copy file name to clipboardExpand all lines: vue2-tutorials/single-file/demo2/pnpm-lock.yaml
+8Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vue2-tutorials/single-file/demo2/src/main.js

Copy file name to clipboardExpand all lines: vue2-tutorials/single-file/demo2/src/main.js
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import "animate.css";
12
import Vue from "vue";
23
import VueRouter from "vue-router";
34
import App from "./App.vue";

‎vue2-tutorials/single-file/demo2/src/views/demo10/Vue2 过渡动画与 Animate.css 整合指南.md

Copy file name to clipboard
+166Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
# Vue2 过渡动画与 Animate.css 整合指南
2+
3+
## 一、Transition 与 TransitionGroup 对比
4+
5+
| 特性 | Transition | TransitionGroup |
6+
| -------- | ----------------- | --------------- |
7+
| 用途 | 单个元素/组件过渡 | 列表项过渡 |
8+
| 要求 | 需要条件渲染 | 需要 `key` 属性 |
9+
| 动画类 | 自动生成 | 可自定义类名 |
10+
| 额外效果 | - | 自动处理定位 |
11+
12+
## 二、Animate.css 集成方案
13+
14+
### 1. 基本集成方法
15+
```html
16+
<TransitionGroup
17+
name="animate__animated animate__bounce"
18+
appear
19+
enter-active-class="animate__flipInX"
20+
leave-active-class="animate__flipOutX"
21+
>
22+
<!-- 列表项 -->
23+
</TransitionGroup>
24+
```
25+
26+
### 2. 常用动画效果
27+
| 进入效果 | 离开效果 | 说明 |
28+
| ---------------------- | ------------------------ | -------- |
29+
| `animate__fadeIn` | `animate__fadeOut` | 淡入淡出 |
30+
| `animate__zoomIn` | `animate__zoomOut` | 缩放效果 |
31+
| `animate__slideInLeft` | `animate__slideOutRight` | 滑动效果 |
32+
| `animate__flipInX` | `animate__flipOutX` | 3D翻转 |
33+
34+
## 三、自定义动画与库动画结合
35+
36+
### 1. 混合使用示例
37+
```html
38+
<!-- 自定义单个元素动画 -->
39+
<Transition name="bunny">
40+
<h3 v-show="visibility">自定义动画</h3>
41+
</Transition>
42+
43+
<!-- Animate.css 列表动画 -->
44+
<TransitionGroup
45+
enter-active-class="animate__animated animate__fadeInUp"
46+
leave-active-class="animate__animated animate__fadeOutDown"
47+
>
48+
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
49+
</TransitionGroup>
50+
```
51+
52+
### 2. 动画性能优化
53+
```css
54+
/* 启用GPU加速 */
55+
.animate__animated {
56+
animation-duration: 0.5s;
57+
backface-visibility: hidden;
58+
}
59+
60+
/* 限制动画影响范围 */
61+
.bunny-enter-active, .bunny-leave-active {
62+
will-change: transform;
63+
isolation: isolate;
64+
}
65+
```
66+
67+
## 四、最佳实践建议
68+
69+
### 1. 动画选择原则
70+
- **移动端**：使用较轻量的动画（如fade）
71+
- **重要交互**：使用明显的反馈动画（如bounce）
72+
- **连续操作**：保持动画风格一致
73+
74+
### 2. 时间控制技巧
75+
```javascript
76+
// 动态控制动画时长
77+
data() {
78+
return {
79+
duration: window.innerWidth < 768 ? 300 : 500
80+
}
81+
}
82+
```
83+
84+
### 3. 无障碍访问
85+
```css
86+
/* 减少运动偏好设置 */
87+
@media (prefers-reduced-motion: reduce) {
88+
.animate__animated,
89+
.bunny-enter-active,
90+
.bunny-leave-active {
91+
animation: none !important;
92+
transition: none !important;
93+
}
94+
}
95+
```
96+
97+
## 五、进阶应用场景
98+
99+
### 1. 路由过渡动画
100+
```html
101+
<Transition :name="transitionName" mode="out-in">
102+
<router-view></router-view>
103+
</Transition>
104+
105+
<script>
106+
export default {
107+
data() {
108+
return {
109+
transitionName: 'slide'
110+
}
111+
},
112+
watch: {
113+
'$route'(to, from) {
114+
this.transitionName = to.meta.transition || 'fade'
115+
}
116+
}
117+
}
118+
</script>
119+
```
120+
121+
### 2. 状态驱动的动画
122+
```javascript
123+
computed: {
124+
animationClass() {
125+
return this.isError
126+
? 'animate__shakeX'
127+
: 'animate__tada'
128+
}
129+
}
130+
```
131+
132+
### 3. 动画事件钩子
133+
```html
134+
<Transition
135+
@before-enter="beforeEnter"
136+
@after-enter="afterEnter"
137+
>
138+
<div v-if="show">内容</div>
139+
</Transition>
140+
141+
<script>
142+
methods: {
143+
beforeEnter(el) {
144+
el.style.opacity = 0
145+
},
146+
afterEnter(el) {
147+
// 动画结束后的处理
148+
}
149+
}
150+
</script>
151+
```
152+
153+
## 六、常见问题解决
154+
155+
1. **动画不连贯**：
156+
- 使用 `mode="out-in"` 确保顺序执行
157+
- 检查 `key` 属性是否唯一
158+
159+
2. **初始渲染无动画**：
160+
- 添加 `appear` 属性
161+
- 检查初始状态是否正确
162+
163+
3. **移动端性能差**：
164+
- 减少动画复杂度
165+
- 使用 `will-change` 提示浏览器优化
166+

‎vue2-tutorials/single-file/demo2/src/views/demo10/index.vue

Copy file name to clipboardExpand all lines: vue2-tutorials/single-file/demo2/src/views/demo10/index.vue
+18-6Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
<template>
2-
<div class="card">
2+
<div class="container card">
33
<div class="card-header">
44
<h1>动画效果:{{ visibility }}</h1>
55
</div>
66

7-
<Transition name="bunny" :appear="true">
8-
<div class="card-body" v-show="visibility">
9-
<h3>显示动画</h3>
10-
</div>
11-
</Transition>
7+
<div class="card-body">
8+
<Transition name="bunny" :appear="true">
9+
<h3 v-show="visibility">显示动画</h3>
10+
</Transition>
11+
12+
<ul>
13+
<TransitionGroup
14+
name="animate__animated animate__bounce"
15+
appear
16+
enter-active-class="animate__flipInX"
17+
leave-active-class="animate__flipOutX"
18+
>
19+
<li key="1" v-show="visibility">嗬嗬嗬嗬嗬嗬嗬嗬嗬嗬嗬</li>
20+
<li key="2" v-show="!visibility">哈哈哈哈哈哈哈哈哈哈哈</li>
21+
</TransitionGroup>
22+
</ul>
23+
</div>
1224

1325
<div class="card-footer">
1426
<div class="btn-group">

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.