Vue.js 超详细入门与项目实战（微课视频版）课件 第05章 元素动画效果.pptx

第5章元素动画效果;教学内容;知识目标;知识点预览;在Vue中，专门提供了一个名称为transition的内置组件，该组件本身和它的顶层并不渲染动画效果，而只是将动画效果应用到被组件包裹的DOM元素上，代码如下所示。

transition

div动画元素/div

/transition

transition组件可以实现的动画包括过渡和自定义两种，底层都是由CSS3中的样式来完成的，在动画执行时，组件自动生成CSS3动画类名属性，格式为：name-string;效果

;在Vue中，不仅可以实现过渡动画效果，还可以给元素添加自定义的动画。区别是，自定义动画中名称为v-enter-from样式类别在animationend事件被触发时才移除；除可以自定义动画外，还可以自定义动画的样式类别名称。;效果

;在动画组件transition中，可以接收自定义类别样式的属性有6个，名称分别为：enter-from-class、enter-active-class、enter-to-class、leave-from-class、leave-active-class和leave-to-class，它们的功能与动画组件默认6个类别样式一致。;效果

;animate.css是一个使用CSS样式实现动画效果的第三方库文件，它包含各类动画效果，如强调、切换和引导等，同时，它能很好地兼容各大浏览器，可以很方便地快速运用到各个Web项目中。

在使用animate.css动画库之前，需要先在在项目文件夹下，输入如下指令。

npminstallanimate

安装成功后，在需要使用该动画效果的组件中导入该库文件，代码如下。

importanimate.css;

导入成功后，就可以在组件的模板元素中，使用动画库的类别样式了。;效果

;gsap它的全称是GreenSockAnimationPlatform，它是一个功能非常强大的动画平台，它可以对JavaScript操作的所有内容实现动画效果，同时，还解决了不同浏览器中存在的兼容性问题，而且速度和效率都非常快。

在使用gsap平台提供的动画之前，首先需要在项目文件夹下，通过下列指令来安装gsap框架，指令如下所示。

npminstallgsap

安装成功后，在需要使用该动画效果的组件中导入该库文件，代码如下。

importgsapfromgsap;

导入成功后，就可以在组件的模板元素中，使用平台框库中的动画效果了。

;效果

;动画不仅可以作用于一个节点或一个组件上，而且还可以作用于多个节点和组件中。

transition-group是新增的一个动画组件，它可以在多个元素中应用动画，具有以下特征：

?默认情况下，它不会渲染组件包裹中某个元素，除非单独指定某一个元素。

?过渡的模式不可使用，因为它不再相互切换元素的特有效果。

?元素内部需要提供唯一的属性key值，用于标识动画作用的是哪个元素。

?CSS过渡样式仅作用于包裹的内部元素，不会应用于动画组件本身。

transition-group组件不仅可以在列表中实现基础的动画效果，还可以在列表中实现交错过渡的效果。;效果

;通过自定义CSS样式实现的动画效果非常有限，还面临浏览器的兼容性问题。gsap动画平台则是一个非常不错的选择，该平台不仅支持简单的动画效果，而且还能实现复杂的列表动画。可以针对所有的JavaScript操作实现动画效果，在transition-group组件中，为了监听动画执行的过程，提供了许多钩子函数。

;效果