From 76ef5f7e5b3b7731a57e410c1de28d4a1a4de894 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Sat, 21 Jun 2025 23:06:10 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Vue2=20Transition=20=E5=8A=A8?= =?UTF-8?q?=E7=94=BB=E7=B3=BB=E7=BB=9F=E8=AF=A6=E8=A7=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue2-tutorials/single-file/demo2/src/App.vue | 8 +- .../demo10/Vue2 Transition 动画系统详解.md | 175 ++++++++++++++++++ .../demo2/src/views/demo10/index.vue | 52 ++++++ 3 files changed, 232 insertions(+), 3 deletions(-) create mode 100644 vue2-tutorials/single-file/demo2/src/views/demo10/Vue2 Transition 动画系统详解.md create mode 100644 vue2-tutorials/single-file/demo2/src/views/demo10/index.vue diff --git a/vue2-tutorials/single-file/demo2/src/App.vue b/vue2-tutorials/single-file/demo2/src/App.vue index b34bd10..4f36dbb 100644 --- a/vue2-tutorials/single-file/demo2/src/App.vue +++ b/vue2-tutorials/single-file/demo2/src/App.vue @@ -9,7 +9,8 @@ - + + @@ -21,11 +22,12 @@ // import Demo5 from "@/views/demo5/index.vue"; // import Todo from "@/views/todo/index.vue"; // import Demo8 from "@/views/demo8/index.vue"; -import Demo9 from "@/views/demo9/index.vue"; +// import Demo9 from "@/views/demo9/index.vue"; +import Demo10 from "@/views/demo10/index.vue"; export default { name: "App", // components: { Demo1, Demo2, Demo3 }, - components: { Demo9 }, + components: { Demo10 }, }; diff --git a/vue2-tutorials/single-file/demo2/src/views/demo10/Vue2 Transition 动画系统详解.md b/vue2-tutorials/single-file/demo2/src/views/demo10/Vue2 Transition 动画系统详解.md new file mode 100644 index 0000000..b938725 --- /dev/null +++ b/vue2-tutorials/single-file/demo2/src/views/demo10/Vue2 Transition 动画系统详解.md @@ -0,0 +1,175 @@ +# Vue2 Transition 动画系统详解 + +## 一、基本动画实现 + +### 1. Transition 组件核心用法 +```html + +
内容
+ +``` + +| 属性 | 说明 | 示例值 | +| -------- | -------------------- | -------- | +| `name` | 动画类名前缀 | "bunny" | +| `appear` | 初始渲染是否应用动画 | true | +| `mode` | 过渡模式 | "out-in" | + +### 2. 动画类名系统 +```css +/* 进入动画 */ +.bunny-enter-active { /* 激活阶段样式 */ } +.bunny-enter { /* 开始状态 */ } +.bunny-enter-to { /* 结束状态 */ } + +/* 离开动画 */ +.bunny-leave-active { /* 激活阶段样式 */ } +.bunny-leave { /* 开始状态 */ } +.bunny-leave-to { /* 结束状态 */ } +``` + +## 二、动画效果进阶 + +### 1. CSS 动画实现 +```css +/* 关键帧动画 */ +@keyframes slip { + from { transform: translateX(-100%); } + to { transform: translateX(0); } +} + +.bunny-enter-active { + animation: slip 0.5s ease-out; +} + +.bunny-leave-active { + animation: slip 0.5s ease-in reverse; +} +``` + +### 2. 过渡效果实现 +```css +/* 过渡效果 */ +.bunny-enter-active, .bunny-leave-active { + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); +} + +.bunny-enter, .bunny-leave-to { + opacity: 0; + transform: scale(0.8); +} +``` + +## 三、最佳实践指南 + +### 1. 性能优化建议 +- 优先使用 `transform` 和 `opacity` 属性 +- 避免动画期间触发布局重排 +- 对移动设备减少动画持续时间 + +### 2. 动画调试技巧 +```css +/* 调试用边框 */ +.bunny-enter-active { + outline: 2px solid red; +} +``` + +### 3. 响应式动画方案 +```javascript +computed: { + animationDuration() { + return this.isMobile ? 300 : 500 + } +} +``` + +## 四、高级应用场景 + +### 1. 列表过渡 +```html + +
  • + {{ item.text }} +
    • +     + + +``` + +### 2. 动态过渡 +```html + + + + + +``` + +### 3. JavaScript 钩子 +```html + + + + + +``` + +## 五、常见问题解决方案 + +1. **动画不生效排查**： + - 检查类名前缀是否匹配 + - 确认元素初始状态是否正确 + - 验证CSS属性是否可动画 + +2. **闪烁问题处理**： + ```css + .v-enter { + opacity: 0.01; /* 避免初始状态检测问题 */ + } + ``` + +3. **多元素过渡**： + ```html + +
    {{ currentView }}
    +     + ``` + +## 六、与Vue3的对比 + +| 特性 | Vue2 | Vue3 | +| -------- | ---------------------- | ---------------- | +| 类名前缀 | `v-` 或自定义 | 相同 | +| 过渡模式 | 支持 `in-out`/`out-in` | 新增 `in-out-in` | +| 性能 | 基于CSS | 基于FLIP优化 | +| 新特性 | - | 过渡持久化 | + diff --git a/vue2-tutorials/single-file/demo2/src/views/demo10/index.vue b/vue2-tutorials/single-file/demo2/src/views/demo10/index.vue new file mode 100644 index 0000000..4ca312d --- /dev/null +++ b/vue2-tutorials/single-file/demo2/src/views/demo10/index.vue @@ -0,0 +1,52 @@ + + + + +