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

第5章元素动画效果课件V1.0

教学内容第一节

过渡动画第二节自定义动画第三节第三方动画库第四节列表动画知识目标教学目标理解和掌握过渡动画实现的方法和流程理解自定义动画的工作过程和原理掌握第三方动画库和列表动画实现的方法知识点预览#节知识点难点重点应用5C05-01过渡动画

C05-02自定义动画1、自定义动画2、自定义动画样式C05-03第三方动画库1、animate.css2、gsap动画库C05-04列表动画1、transition-group组件基本功能2、交错过渡动画效果

在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安装成功后，在需要使用该动画效果的组件中导入该库文件，代码如下。import"animate.css";导入成功后，就可以在组件的模板元素中，使用动画库的类别样式了。animate.css效果过渡动画

gsap它的全称是GreenSockAnimationPlatform，它是一个功能非常强大的动画平台，它可以对JavaScript操作的所有内容实现动画效果，同时，还解决了不同浏览器中存在的兼容性问题，而且速度和效率都非常快。在使用gsap平台提供的动画之前，首先需要在项目文件夹下，通过下列指令来安装gsap框架，指令如下所示。npminstallgsap安装成功后，在需要使用该动画效果的组件中导入该库文件，代码如下。importgsapfrom'gsap';

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

gsap动画库效果过渡动画

动画不仅可以作用于一个节点或一个组件上，而且还可以作用于多个节点和组件中。transition-group是新增的一个动画组件，它可以在多个元素中应用动画，具有以下特征：

默认情况下，它不会渲染组件包裹中某个元素，除非单独指定某一个元素。过渡的模式不可使用，因为它不再相互切换元素的特有效果。元素内部需要提供唯一的属性key值，用于标识动画作用的是哪个元素。CSS过渡样式仅作用于包裹的内部元素，不会应用于动画组件本身。transition-group组件不仅可以在列表中实现基础的动画效果，还可以在列表中实现交错过渡的效果。

transition-group组件基本功能效果过渡动画

通过自定义CSS样式实现的动画效果非常有限，还面临浏览器的兼容性问题。gsap动画平台则是一个非常不错的选择，该平台不仅支持简单的动画效果，而且还能实现复杂的列表动画。可以针对所