Vue动画

冰露农夫
471 阅读6分钟

Vue中transition动画原理

transition动画显示

image.png 在想要添加动画的标签上包裹一个transition标签，给一个name为xxx image.png 解释一下：有了transition标签，在动画开始的前一帧，vue会自动给包裹的元素加fade-enter和fade-enter-active样式，在动画开始的一瞬间会自动去掉fade-enter并加上fade-enter-to，在动画结束的时候去掉fade-enter-active和fade-enter-to

如第一张图就可以实现，在元素出现时，3s内逐渐opacity为1

所有的样式开头都以fade来开头，是因为：transition起得名字叫做fade，所以样式的前缀都用fade来开头 image.png 那如果不写transition的name属性，vue默认的前缀是v image.png

transition动画隐藏

image.png 时间节点与显示的时间节点意义相同，只是名字不一样，变成了动画隐藏时 image.png

在Vue中使用 animate.css 库（使用keyframe）

1.使用keyframe动画

image.png

2.也可以去自定义vue动画自动添加的样式名，需要在transition标签里去给原名称赋值为新名称

image.png

3.有了以上2点作为支撑，就可以在vue动画中使用animate.css 库（在vue中使用了animate动画库，一些复杂的动画效果就不需要自己去写了）

1.首先去animate.css官网下载，引入文件 image.png image.png 2.将入场动画和出场动画的class都改名为animated，并把自己对出场动画和入场动画分别的动画要求（在官网上看想要哪种）如图跟在class名后面 image.png

需要注意的点：

用自定义class名字的形式去使用animate.css class中必须包含一个animated这样一个具体的类，同时根据需求的不同，把需要的动画效果写在第二个类名的位置上

在Vue中同时使用过渡和动画

1.使用animation.css的问题：当页面第一次渲染的时候，元素的出现是没有动画的，和他互动以后才有动画

如何解决：在transition标签里加appear和自定义appear-active-class为animate后跟需要的动画效果名

image.png

2.假设现在需求:入场动画不仅要有c3的动画效果，还要一个过渡的动画效果，也就是又要animation又要过渡效果

想要？加上自定义的过渡类名，使用就是了 image.png image.png

3.当动画既有animation（也就是keyframe动画）又有transition这种形式的动画，会出现动画时长不一致的问题

image.png type的值为transition时，意思是以transition的时长为准，若为animation，animation的时长为准

这样就统一了动画的时长

还可以不选他俩的值，自己自定义一个动画的时长 image.png ：duration = ‘’指的是自定义一个动画的时长，但animation动画还是会按照自己的时间去执行，只是在自定义的时间后我们为transition标签添加的样式名才会消失 image.png 也可以设置复杂一点：eg：动画入场时长5s，出场时长为10s image.png

Vue中的 Js 动画与 Velocity.js 的结合

vue中提供了很多js动画钩子 入场动画钩子 image.png image.png image.png @before-enter（运行动画之前）/@enter（真正开始运行动画）/#after-enter（当done被调用后触发，表示动画结束后）都是vue自带的js动画钩子，可传入一个叫做el的参数，代表transition标签所包裹的div元素

钩子是什么 ？钩子是在对应的时间段会自动执行的函数

enter钩子稍有差异，他会接收2个参数，一个ransition标签所包裹的div元素，另一个（done）是一个回调函数，这个参数很重要，当动画效果的代码运行结束后，一定要手动的去调用一下done（），代表动画已经执行完.图中代码执行效果：点击toggle后，字体先变成红色，2s后变成绿色，再2s后变成黑色

有入场动画钩子就有出场动画钩子

他们的作用和意义与出场动画钩子完全一致，可以套用 image.png 有了这些基础后，可以写一些复杂一些的js动画，比如使用js常用的动画库Velocity.js

如何使用Velocity.js

1.去官网下载文件并引入 image.png image.png 2.使用 image.png 效果：el元素再动画开始前透明度为0，在一秒内透明度变成1，同时complete：done代表动画结束，相当于手动调用done（），动画结束后，弹出一个窗口说‘动画结束’

Vue中多个元素或组件的动画过渡

需求：当根组件中的data中的show是true的时候，显示hello world元素，false时显示bye world元素 image.png 为什么要key：因为vue会尽可能的复用元素，key是为了告诉他这两个是独立的，不然动画效果不会显示，transition标签上的mode是动画的时间函数，就像ease-in ease-out一样

Vue中多个组件的过渡动画

1.直接在transition标签里傻瓜式放进去两个组件 image.png 2.通过动态组件（借助is）！ image.png image.png

Vue中的列表的动画过渡效果

需求：每点击一个add，就会增加一个数据hello world，当每次增加或删除一个数据的时候，实现动态的动画效果 image.png 给需要动画效果的列表外层包裹一个transition-group标签，同时去写上需要的动画 image.png 解释： 使用了transition-group标签，相当于，给循环出来的每个元素，都加了一个transition标签，这时vue就会使用上面写的在各个时间点加入的样式，给每个元素上完成动画效果 image.png 如图代码的效果就是：每次新增一个数据，新增的数据就会1s内逐渐出现

Vue中的动画封装，让动画变得可复用

应用背景：实现了一个点击toggle，hello world逐渐消失，再次点击，逐渐出现的效果 image.png 使用v-if/插槽/transition标签去实现组件动画

现在其实我们就已经完成了对一个动画的封装

想要复用这个动画的时候，直接用这个组件去包裹想要复用动画的div就可以了，这个div就会有之前封装的动画效果了 image.png image.png 现在还不够完善，还有style在外面没有封装，我们用js去代替style，就可以做到对动画的完全封装 image.png image.png image.png 这样就实现了所有动画都封装在了一个组件里，是比较推荐的封装

avatar
文章
阅读
粉丝