vuejs前端开发案例教程05过渡动画.pptxVIP

Vue.js前端开发案例教程

项目1Vue.js入门项目2Vue.js开发基础项目3Vue.js指令项目4Vue.js组件全书目录项目5过渡动画项目8综合案例——开发图书销售网站项目7网络请求与状态管理项目6路由管理

过渡动画项目五

能够为单元素与单组件添加过渡动画能够为多元素与多组件添加过渡动画能够为列表元素添加过渡动画能够封装并复用过渡动画技能目标02养成自主学习、探究学习、实践学习的良好习惯养成精益求精、追求卓越的做事态度素养目标03掌握单元素或单组件过渡的方法掌握多元素过渡与多组件过渡的方法掌握列表过渡的方法掌握可复用过渡的方法知识目标01项目目标

0102项目描述小刘是一名软件开发工程师，主要负责订餐系统项目的前端开发。

0102项目描述为了更好地展示订餐系统的内容，小刘决定使用?Vue.js?提供的组件在订餐系统中添加过渡动画。

为订餐系统多个模块添加过渡动画0102?项目分析在单文件组件的template标签中使用?Vue.js?提供的组件为指定元素添加过渡动画。在CSS样式文件中使用类选择器和属性设置过渡动画。

项目准备全班学生以3～5人为一组进行分组，各组选出组长。组长组织组员扫码观看“CSS3动画”视频，讨论并回答下列问题。CSS3动画

1.使用CSS3样式实现动画的方式有哪些？2.详细介绍一种自己熟悉的动画实现方式。思考问题项目准备

01单元素或单组件过渡列表过渡项目总结项目实元素过渡与多组件过渡可复用过渡项目考核项目实训040608项目导航项目评价09

定义单元素或单组件过渡单元素或单组件过渡是指单个元素或组件自身从一种状态变为另一种状态，如显示和隐藏。

Transition组件可以为任何单元素或单组件添加过渡动画，语法格式如下。transitionname=过渡动画名!--要添加过渡动画的元素或组件--/transitionTransition组件单元素或单组件过渡该值不是必须存在的，可根据需要进行设置

进入过渡阶段：指元素从无到有的过程。离开过渡阶段：指元素从有到无的过程。Transition组件当添加了过渡动画的单元素或单组件因?v-if?指令或?v-show?指令的作用发生状态变化时，过渡动画会被触发。单元素或单组件的状态变化包括两个阶段，分别为进入过渡和离开过渡。单元素或单组件过渡

CSS?类选择器v-enter-fromv-enter-tov-enter-active定义进入过渡的初始状态。在元素或组件被渲染或显示之前添加，在元素被渲染或显示之后的下一帧移除。定义进入过渡生效时的状态。应用于整个进入过渡阶段，在元素或组件被渲染或显示之前添加，在进入过渡完成后移除。可用来定义元素或组件进入过渡的持续时间、延迟和速度曲线类型。定义进入过渡的最终状态。在元素或组件被渲染或显示之后的下一帧添加（与此同时，v-enter-from被移除），在进入过渡完成后移除。单元素或单组件过渡1.用于设置元素或组件进入过渡阶段动画效果的类选择器

CSS?类选择器v-leave-fromv-leave-tov-leave-active定义离开过渡的初始状态。在离开过渡被触发时立刻添加，下一帧移除。定义离开过渡生效时的状态。应用于整个离开过渡阶段，在离开过渡被触发时立刻添加，在离开过渡完成后移除。可用来定义元素或组件离开过渡的持续时间、延迟和速度曲线类型。定义离开过渡的最终状态。在离开过渡被触发后的下一帧添加（与此同时，v-leave-from被移除），在离开过渡完成后移除。单元素或单组件过渡2.用于设置元素或组件离开过渡阶段动画效果的类选择器

使用CSS3样式实现过渡动画1.使用transition属性实现过渡动画单元素或单组件过渡一般情况下，在类选择器?v-enter-active?和?v-leave-active?中使用?transition?属性定义应用过渡动画的CSS属性、过渡动画的持续时间、过渡动画的速度曲线等。

使用transition标签结合?transition?属性实现过渡动画。例1单元素或单组件过渡

使用transition标签结合?transition?属性实现过渡动画。例1单元素或单组件过渡（续）

使用浏览器打开网页文件，页面效果如图所示。例1单元素或单组件过渡单击“显示/隐藏”按钮，按钮下方的内容会向左移动隐藏。再次单击“显示/隐藏”按钮，按钮下方的内容会从右向左移动显示。

使用CSS3样式实现过渡动画2.使用animation属性实现过渡动画单元素或单组件过渡一般情况下，在类选择器?v-enter-active?和?v-leave-active?中使用?animation?属性实现过渡动画。使用?animation