首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
第 11 章 使用动画
11.1 使用CSS 3创建动画
11.1.1 transition过渡动画
11.1.2 keyframes动画
11.2 使用JavaScript的方式实现动画效果
11.3 Vue过渡动画
11.3.1 定义过渡动画
11.3.2 设置动画过程中的监听回调
11.3.3 多个组件的过渡动画
11.3.4 列表过渡动画
11.4 实战:优化用户列表页面
第 12 章 Vue CLI工具的使用
12.1 Vue CLI工具入门
12.1.1 Vue CLI工具的安装
12.1.2 快速创建Vue项目
12.2 Vue CLI项目模板工程
12.2.1 模板工程的目录结构
12.2.2 运行Vue项目工程
12.2.3 vue-class-component库简介
12.3 在项目中使用依赖
12.4 工程构建
12.5 新一代前端构建工具Vite
12.5.1 Vite与Vue CLI
12.5.2 体验Vite构建工具
第 13 章 Element Plus基于Vue 3的UI组件库
13.1 Element Plus入门
13.1.1 Element Plus的安装与使用
13.1.2 按钮组件
13.1.3 标签组件
13.1.4 空态图与加载占位图组件
13.1.5 图片与头像组件
13.2 表单类组件
13.2.1 单选框与多选框
13.2.2 标准输入框组件
13.2.3 带推荐列表的输入框组件
13.2.4 数字输入框
13.2.5 选择列表
13.2.6 多级列表组件
13.3 开关与滑块组件
13.3.1 开关组件
13.3.2 滑块组件
13.4 选择器组件
13.4.1 时间选择器
13.4.2 日期选择器
13.4.3 颜色选择器
13.5 提示类组件
13.5.1 警告组件
13.5.2 消息提示
13.5.3 通知组件
13.6 数据承载相关组件
13.6.1 表格组件
13.6.2 导航组件
13.6.3 标签页组件
13.6.4 抽屉组件
13.6.5 布局容器组件
13.7 实战:教务系统学生表
当前位置:
首页>>
技术小册>>
TypeScript和Vue从入门到精通(四)
小册名称:TypeScript和Vue从入门到精通(四)
### 11.1.1 Transition过渡动画 在Vue.js与TypeScript结合的项目中,实现平滑且吸引人的用户界面过渡效果是提升用户体验的关键一环。Vue提供了内置的`<transition>`和`<transition-group>`组件,使得在元素或组件的进入、离开及列表的变动过程中添加过渡效果变得简单而直观。本章节将深入探讨如何在Vue与TypeScript项目中利用这些功能来创建丰富的过渡动画。 #### 11.1.1.1 理解Transition组件 Vue的`<transition>`组件是一个抽象组件,它包裹了一个或多个子元素,并在这些子元素进入、离开或列表变动时应用过渡效果。`<transition>`组件本身不会渲染任何DOM元素,也不会出现在最终的渲染结果中,它仅用于控制包裹内容的过渡效果。 ##### 基本用法 ```vue <template> <div id="app"> <button @click="show = !show">Toggle</button> <transition name="fade"> <p v-if="show">Hello, Vue.js!</p> </transition> </div> </template> <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ data() { return { show: true }; } }); </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ { opacity: 0; } </style> ``` 在上面的例子中,`<transition name="fade">`定义了一个名为`fade`的过渡效果,通过CSS类`.fade-enter-active`、`.fade-leave-active`、`.fade-enter`和`.fade-leave-to`(或`.fade-leave-active`,取决于Vue版本)来控制过渡动画。 #### 11.1.1.2 过渡模式与类名 Vue的`<transition>`组件支持多种过渡模式,包括`in-out`(新元素先进入,完成后旧元素离开)和`out-in`(旧元素先离开,完成后新元素进入)。这些模式可以通过`<transition>`组件的`mode`属性来设置。 此外,Vue还允许你通过`enter-class`、`enter-active-class`、`enter-to-class`(2.1.8+)、`leave-class`、`leave-active-class`、`leave-to-class`(2.1.8+)等属性直接指定过渡类名,为开发者提供了更灵活的过渡控制手段。 #### 11.1.1.3 使用JavaScript钩子 除了CSS过渡和动画外,Vue还允许你在`<transition>`组件中定义JavaScript钩子,以便在过渡的不同阶段执行JavaScript代码。这些钩子包括`beforeEnter`、`enter`、`afterEnter`、`enterCancelled`、`beforeLeave`、`leave`、`afterLeave`和`leaveCancelled`。 ```vue <transition @before-enter="beforeEnter" @enter="enter" @leave="leave" > <!-- ... --> </transition> <script lang="ts"> export default Vue.extend({ methods: { beforeEnter(el: HTMLElement) { // ... }, enter(el: HTMLElement, done: Function) { // 使用setTimeout模拟动画 setTimeout(() => { // ... done(); }, 500); }, leave(el: HTMLElement, done: Function) { // 类似enter setTimeout(done, 500); } } }); </script> ``` 在TypeScript中,注意方法参数的类型定义,如`el: HTMLElement`和`done: Function`,这有助于在开发过程中获得更好的类型检查和自动补全。 #### 11.1.1.4 Transition-Group与列表过渡 当需要为列表中的每个元素应用过渡效果时,可以使用`<transition-group>`组件。`<transition-group>`不仅支持单个元素的过渡效果,还提供了对列表排序、添加、删除等操作的过渡支持。 ```vue <template> <transition-group name="list" tag="div"> <div v-for="item in items" :key="item.id">{{ item.text }}</div> </transition-group> </template> <script lang="ts"> import Vue from 'vue'; interface Item { id: number; text: string; } export default Vue.extend({ data() { return { items: [ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }, // ... ] }; } }); </script> <style> .list-enter-active, .list-leave-active { transition: opacity 1s, transform 1s; } .list-enter, .list-leave-to /* .list-leave-active in <2.1.8 */ { opacity: 0; transform: translateY(30px); } </style> ``` 注意,`<transition-group>`需要一个`tag`属性来指定渲染的真实元素类型,因为Vue无法推断出包裹多个元素的单个容器类型。 #### 11.1.1.5 过渡动画的进阶应用 - **动态过渡名称**:可以通过绑定`:name`属性来动态改变过渡的名称,实现更灵活的过渡效果。 - **第三方动画库**:结合如Animate.css、Velocity.js等第三方动画库,可以创建更加复杂和吸引人的过渡效果。 - **过渡监听**:Vue的过渡系统提供了`@before-enter`、`@enter`等事件监听,可以在这些钩子中调用第三方动画库的方法,实现更复杂的动画逻辑。 - **性能优化**:对于大型列表或复杂动画,注意优化DOM操作和动画性能,避免造成页面卡顿。 #### 11.1.1.6 总结 Vue的`<transition>`和`<transition-group>`组件为开发者提供了强大而灵活的过渡效果实现方式。通过结合CSS过渡、动画以及JavaScript钩子,可以创建出丰富多样的用户界面过渡效果,提升用户体验。在TypeScript项目中,充分利用TypeScript的类型系统和Vue的过渡系统,可以编写出既高效又易于维护的动画代码。希望本章节的内容能帮助你更好地理解和应用Vue的过渡动画功能。
上一篇:
11.1 使用CSS 3创建动画
下一篇:
11.1.2 keyframes动画
该分类下的相关小册推荐:
Vue.js从入门到精通(三)
vue项目构建基础入门与实战
vuejs组件实例与底层原理精讲
TypeScript和Vue从入门到精通(一)
移动端开发指南
Vue面试指南
Vue原理与源码解析
Vue源码完全解析
Vue3技术解密
Vue.js从入门到精通(四)
TypeScript和Vue从入门到精通(二)
VUE组件基础与实战