6-1 6.1通过CSS方式实现过渡效果ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

《6-1 6.1通过CSS方式实现过渡效果ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《6-1 6.1通过CSS方式实现过渡效果ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（24页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、6-1 6.1 通过CSS方式实现过渡效果教学课件 Vue.js基础与应用开发实战（微课版）6.1 通过CSS方式实现过渡效果以下示例代码通过一个按钮控制p元素显隐，并且没有使用过渡效果。【示例】：demo0601.html代码如下：隐藏 显示 欢迎登录 var vm=new Vue(el:#app,data:show:true )如果要为页面内容的显隐添加过渡效果，则需要使用过渡组件。6.1.1 过渡组件与过渡类1过渡组件Vue提供了transition组件，下面代码中，该过渡组件的名称为fade。欢迎登录当插入或删除包含在transition组件中的元素时，Vue会自动嗅探目标元素是否应用

2、了 CSS过渡或动画，如果应用，在恰当的时机添加/删除CSS类名。2过渡类为实现CSS方式过渡效果，Vue提供了6个类，用于enter/leave的过渡中进行切换，实现过渡效果，如图6-1所示。图图6-1 实现实现CSS方式过渡效果的方式过渡效果的6个类个类（1）v-enter类用于定义进入过渡的开始状态，作用于开始的一帧。在元素被插入时生效，在元素插入之后的下一帧移除。（2）v-enter-active类用于定义过渡生效时的状态，作用于整个过程。在元素整个过渡过程中作用，在元素被插入时生效，在transition或animation完成之后移除。这个类可以被用来定义过渡的过程时间。（3）v-

3、enter-to类用于定义进入过渡的结束状态，作用于结束的一帧。在元素 被 插 入 一 帧 后 生 效（与 此 同 时 v-enter被 删 除），在transition或animation完成之后移除。（4）v-leave类用于定义离开过渡的开始状态，作用于开始的一帧。在离开过渡被触发时生效，在下一个帧移除。（5）v-leave-active类用于定义过渡生效时的状态，在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在transition或animation完成之后移除。这个类可以被用来定义过渡的过程时间。（6）v-leave-to类用于定义离开过渡的结束状态，在离开过渡被触发一帧后生

4、效（与此同时v-leave被删除），在transition或animation完成之后移除。对于这些在实现过渡切换效果的类名，v-是这些类名的前缀，表示过渡组件的名称。可以使用name属性设置前缀，如果将name属性设置为fade，那么“fade-”就是在过渡中切换的类名前缀，如fade-enter、fade-leave等。如果没有设置name属性名称，那么“v-”就是这些类名的默认前缀，如v-enter、v-leave等。建议设置name值进行命名，这样在应用到另一个过渡时就不会产生冲突。6.1.2 使用transition组件结合transition属性实现过渡效果常用的Vue过渡效果可以

5、使用transition组件结合transition属性实现。通过过渡transition属性，可以让Web前端开发人员不需要使用javascript就可以实现简单的动画交互效果。过渡transition是一个复合属性，包括transition-property（过渡属性，默认值为all）、transition-duration（过渡持续时间，默认值为0s）、transition-timing-function（过渡函数，默认值为ease函数）、transition-delay（过渡延迟时间，默认值为0s）这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。【实例6-1】使用tran

6、sition组件结合transition属性实现过渡效果【操作要求】使用transition组件结合transition属性实现过渡效果，页面内容进入时呈现透明度变化的效果，离开时呈现位移变化的效果。【实现过程】创建网页0601.html，在该文件中编写以下代码实现要求的功能。隐藏 /使用v-if指令切换组件的可见性 显示 /将标签的name属性值设置为fade【实现过程】/在写CSS样式时，相对应的类名前缀以“fade-”开头。  欢迎登录 【实现过程】var vm=new Vue(el:#app,data:show:true )【实现过程】CSS设置代码如下所示。/*可

7、以设置不同的进入和离开动画*/.fade-enter opacity:0;.fade-enter-active transition:opacity.5s;【实现过程】.fade-leave-active transition:transform.5s;.fade-leave-to transform:translateX(10px);6.1.3 使用transition组件结合animation属性实现过渡效果animation使用关键帧声明动画，关键帧的语法是以keyframes开头，后面紧跟着动画名称animation-name。animation是一个复合属性，包括以下8个子属性，其作

8、用如下所示。（1）animation-name：动画名称（默认值为none）。（2）animation-duration：持续时间（默认值为0）。（3）animation-timing-function：时间函数（默认值为ease）。（4）animation-delay：延迟时间（默认值为0）。（5）animation-iteration-count：循环次数（默认值为1）。（6）animation-direction：动画方向（默认值为normal）。（7）animation-play-state：播放状态（默认值为running）。（8）animation-fill-mode：填充模式（默

9、认值为none）。CSS动画animation与CSS过渡transition的区别是在动画中v-enter类在节点插入DOM后不会立即删除，而是在animationend事件触发时删除。6.1.4 同时使用transition属性和animation属性实现过渡效果Vue为了知道过渡是否完成，必须设置相应的事件监听器，它可以是transitionend或animationend，这取决于给元素应用的CSS规则。如果使用其中任何一种，Vue能自动识别类型并设置监听。但是，在一些场景中，需要给同一个元素同时设置两种过渡动效，比如animation很快的被触发并完成了，而transition效果还没结束。在这种情况中，就需要使用type特性并设置animation或transition来明确声明需要Vue监听的类型。6.1.5 通过transition组件的appear属性实现渲染动画可以通过给transition组件设置appear属性来实现元素在渲染的动画效果。例如：这里默认和进入、离开动画效果一样，同样也可以自定义CSS类名。例如：6.1.6 为动态组件添加过渡效果使用is属性实现的动态组件，可以添加过渡效果。快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！