Vue.js3前端开发基础及项目化应用教案单元5过渡和动画_教学设计.docx

《Vue.js3前端开发基础及项目化应用教案单元5过渡和动画_教学设计.docx》由会员分享，可在线阅读，更多相关《Vue.js3前端开发基础及项目化应用教案单元5过渡和动画_教学设计.docx（7页珍藏版）》请在优知文库上搜索。

1、Vue.js前端开发基础及项目化应用教学设计课程名称：Vuejs前一开发基础及项化应里授课年级：授课学期：学年第一学期一教师发名：2023年09月09日课题名称单元5过渡和动画计划学时4学时内容分析合理设计动态效果是前端项目提高用户体验的必要手段。本章将介绍Vue的内置组件TranSition和TranSitionGroUP是如何定义CSS过渡和动画，来响应元素状态变化的。通过“会员中心页面”任务的实施，帮助学习者进一步掌握TranSition和TranSitiOnGroUP组件的应用。教学目标及基本要求1 .理解过渡和动画含义2 .掌握过渡和动画的实现方法3 .能够实现单个元素过渡和动画4

2、.能够实现多个元素和组件过渡5 .能够利用钩子函数实现过渡和动画6 .能够实现列表过渡教学重点1 .掌握过渡和动画的实现方法2 .能够实现单个元素过渡和动画3 .能够实现多个元素和组件过渡教学难点能够实现单个元素过渡和动画教学方式教学采用教师使用PPT讲解和案例示范相结合的方式教学过程第一课时(认识过渡和动画，TralISitiOn组件，过渡和动画样式类)一、创设情境，引入过渡和动画概念1 .教师通过应用场景描述，引出过渡和动画的必要性。前端项目开发中，合理地运用动画技术，能够增强页面的交互效果，引导用户看到操作的反馈，从而有效地提升用户的体验。例如：为了引导用户关注页面的反馈信息或场景的切换

3、，不少网页中会加入一些动画效果，来吸引用户的注意力。2 .明确学习目标。理解过渡和动画含义掌握过渡和动画的实现方法二、进行重点知识的讲解I.过渡和动画含义？在页面组件中元素显示状态发生改变时，元素不会直接显示和隐藏，而是伴随一个过渡或动画效果，该效果的核心原理是采用CSS的类(ClaSS)选择器来实现的。2.教师根据课件，回顾CSS3相关属性知识，介绍TranSilion组件基本用法。（1）教师根据课件，介绍回顾CSS3相关属性知识，并使用代码进行演示。CSS3中transition和animation属性，它们分别用于支持过渡和动画效果。（2）教师根据课件，介绍TranSitiOn组件语法规

4、则、进入和离开状态触发方式、Transition组件的常用属性，并使用代码进行演示。语法：（3）教师根据课件，介绍TranSiIion实现过渡和动画的原理。当插入或删除被包裹在TransiHon组件内的元素时，Vue首先判断目标元素是否应用了个CSS3过渡/动画效果。如果是，则会在某个时间点自动添加或移除对应的样式类，否则，将会调用对应的JaVaSeriPt钩子函数。如果上述情况均不存在，则下帧将立即执行插入或删除元素的操作。（4）教师根据课件，介绍过渡和动画样式类。过温阳输球(enter)，定义进入的开地状态.元*被捕入前净加.施入名立ID霞漕薛v-rtr-actve定义进入的生效状态.元素

5、被雁入射添加,三手啦2渡3曲完成之后才清.它可用于定义进入过通/说的楞续时间、BbS和曲废函敷v-enter-to定义进入的结荣状毒.元素被Ht入后添加，在过灌题完成2后被滑除ff 能够利用Transition结合CSS实现过渡和动画 能够利用TranSitiOn结合JaVaSCriPt实现过渡和动画二、进行重点知识的讲解1.教师根据课件,通过例5.2,5.3案例讲解TranSiIiOn结合CSS如何实现过渡和动画。2.教师根据课件，介绍JaVaSeriPI对应进入/离开两个阶段的8个钩子函数,通过例5.4,5.5案例讲解Transition结合JavaScript如何实现过渡和动画。（1）J

6、avaScript的8个钩子函数/before-enter：进入过渡/动画开始前执行的方法。/enter：进入过渡/动画过程中执行的方法。/after-enter：进入过渡/动画完成后执行的方法。Jcnter-cancellcd：进入过渡/动画取消时执行的方法。/before-leave：离开过渡/动画开始前执行的方法。/leave：离开过渡/动画过程中执行的方法。/afterleave:离开过渡/动画完成后执行的方法。/IeaVeYanCeIled:离开过渡/动画取消时执行的方法。（2）结合案例讲解以上钩子函数的具体应用三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行

7、总结。教师带领学生总结本节课需要了解的知识点，包括JavaScript钩子函数的用法，利用Transition结合CSSTransition结合JaVaSCriPt进行过渡和动画的具体实现。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第三课时（多元素过渡，TralISitiOnGrOlIP组件，列表过渡）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了TranSitiOn结合

8、CSS、Transition结合JaVaSCriPt进行过渡和动画的具体实现。接下来，本节课将介绍多个元素过渡实现方法，利用TransitionGroup组件实现列表过渡的方法。3 .明确学习目标。 掌握多元素过渡的实现方法 掌握TransitionGroup的应用二、进行重点知识的讲解1 .教师根据课件，讲解不同类型和相同类型多元素的过渡实现，并使用代码进行演示。（1）针对多个不同类型的元素，利用v-if/v-else进行元素间的切换，使这些元素应用同一个过渡效果。（2）针对多个相同类型的元素，通过设置key属性值区分相同类型的不同元素，实现过渡效果。（3）针对多个组件，VUe提供了内置组件

9、COmPOnent,利用它的is属性轮流绑定应用过渡效果的组件名。2 .教师根据课件，介绍TranSitiOnGroUP组件的使用方法，并使用代码进行演示。在个元素或组件被插入和移出v-for列表时应用过渡，从而实现动态列表效果。3 .教师根据课件，介绍项目5一一会员中心页面的需求描述、实现思路和代码实现。（1）需求描述会员中心页面包括左侧导航栏和右侧内容，通过导航栏切换到“我的账户”和“我的游记”，并带有过渡效果；“我的账户”中可以动态增加或删除“邮箱”字段，同样也要求使用过渡效果。（2）实现思路 采用局部组件，构建会员中心页面的“我的账户”和“我的游记”两个部分。 由于“我的账户”和“我的

10、游记”组件切换时，同时间只需沆染其中一个，符合TranSitkm组件应用条件，而“我的账户”表单中“邮箱”字段增加/删除所形成的列表，则需要TranSitiOnGrOUP组件才能实现过渡效果。（3）功能实现任务5-1构建页面布局任务5-2创建局部组件三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括多个元素过渡的实现方法，利用TransitionGroup组件实现列表过渡的方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第四课时（项目实践）项目实践主要针对本单元中需要重点掌握的知识点，通过项目功能实现来加强概念的理解，熟悉并掌握编程知识点的应用，通过项目实践可以考察同学对知识点的掌握情况和应用能力。题目：请编写一个登录页面，其中包含3个输入框：用户名、密码和验证码。只有当用户输入密码错误时，才要求输入验证码，并使用Transition组件实现验证码输入框显示的过渡效果形式：单独完成要求：利用本单元中的知识点，实现项目需求对应的功能，并且程序能够正常运行。考题和习题见教材单元5配套的习题教学后记