单元5 过渡和动画_教学设计.pdfVIP

《Vue.js前端开发基础及项目化应用》

教学设计

课程名称：Vue.js前端开发基础及项目化应用

授课年级：2021级

授课学期：2023学年第一学期

教师姓名：某某老

2023年09月09日

课题计划

单元5过渡和动画4学时

名称学时

合理设计动态效果是前端项目提高用户体验的必要手段。本章将介绍

内容Vue的内置组件Transition和TransitionGroup是如何定义CSS过渡和动画，

分析来响应元素状态变化的。通过“会员中心页面”任务的实施，帮助学习者进

一步掌握Transition和TransitionGroup组件的应用。

1．理解过渡和动画含义

2．掌握过渡和动画的实现方法

教学目

3．能够实现单个元素过渡和动画

标及基

4．能够实现多个元素和组件过渡

本要求

5．能够利用钩子函数实现过渡和动画

6．能够实现列表过渡

1．掌握过渡和动画的实现方法

教学

2．能够实现单个元素过渡和动画

重点

3．能够实现多个元素和组件过渡

教学

能够实现单个元素过渡和动画

难点

教学

教学采用教师使用PPT讲解和案例示范相结合的方式

方式

第一课时

（认识过渡和动画，Transition组件，过渡和动画样式类）

一、创设情境，引入过渡和动画概念

1.教师通过应用场景描述，引出过渡和动画的必要性。

前端项目开发中，合理地运用动画技术，能够增强页面的交互效果，

教引导用户看到操作的反馈，从而有效地提升用户的体验。例如：为了引导

用户关注页面的反馈信息或场景的切换，不少网页中会加入一些动画效果，

学

来吸引用户的注意力。

过2.明确学习目标。

程理解过渡和动画含义

掌握过渡和动画的实现方法

二、进行重点知识的讲解

1.过渡和动画含义？

在页面组件中元素显示状态发生改变时，元素不会直接显示和隐藏，

而是伴随一个过渡或动画效果，该效果的核心原理是采用CSS的类

（class）选择器来实现的。

2.教师根据课件，回顾CSS3相关属性知识，介绍Transition组件基本用法。

（1）教师根据课件，介绍回顾CSS3相关属性知识，并使用代码进行演示。

CSS3中transition和animation属性，它们分别用于支持过渡和动画

效果。

（2）教师根据课件，介绍Transition组件语法规则、进入和离开状态触发

方式、Transition组件的常用属性，并使用代码进行演示。

语法：

（3）教师根据课件，介绍Transition实现过渡和动画的原理。

当插入或删除被包裹在Transition组件内的元素时，Vue首先判断目

标元素是否应用了一个CSS3过渡/动画效果。如果是，则会在某个时间点

自动添加或移除对应的样式类，否则，将会调用对应的JavaScript钩子函

数。