动画与过渡效果

文章目录

​​动画效果​​​​过渡效果​​​​多个元素过渡​​​​集成第三方动画​​​​总结​​

动画效果

Vue 提供了 ​​transition​​ 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡：

条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点

也就说利用这个transition标签，我们不需要去用数据绑定，通过改变类来触发进入和离开时的动画。这个transition标签最终Vue在解析模板的时候，把他们给拿掉了

例如现在我们做一个案例：

首先我们拿transition标签把要实现动画的元素给包裹起来：

接下来我们使用​​v-enter-active​​​和​​v-leave-active​​来定义进入的时候要激活的样式和离开时要激活的样式。

我们关注一下​​v-enter-active​​​和​​v-leave-active​​的作用时机：

​​v-enter-active​​：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

isShow立即改变

​​v-leave-active​​：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

isShow立即改变

还有一个注意点： 对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 ​​​v-​​​ 是这些类名的默认前缀。如果你使用了姓名，则要用相应的名字去替换​​v-​​

例如上面的案例，我给起名 – hello

那么代码如下：

如果我们想要一上来打开网页在显示元素的时候就有动画，应该怎么办？

我们可以借助transition标签的appear属性，这是一个布尔属性

依照上面的案例 我们可以有如下几种写法：

你好啊！

你好啊！

过渡效果

上面的案例我们是使用动画完成的，那么我们使用过渡怎么完成呢？

这里我们要引入两个新的时机：​​v-enter​​​、​​v-enter-to​​

​​v-enter​​：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。​​v-enter-to​​：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

我们可以简单地理解为：

​​v-enter​​是进入的起点​​v-enter-to​​是进入的终点

结合我们上面的案例：

橙色部分就是进入的起点，绿色部分就是进入的终点！

离开的时候同理，最后我们的代码如下：

因为进入的起点和离开的终点是一样的，进入的终点和离开的起点是一样的，所以我们可以进行合并。同时为了不破坏原本的样式，我们可以把过渡的时间以及曲线放在​​v-enter-active​​​和 ​​v-leave-active​​中

所以我们可以优化一下代码：

多个元素过渡

如果你想把相同的样式加在多个元素上，就不能使用transiton标签了，而需要使用transition-group标签。

当有相同标签名的元素切换时，需要通过 key attribute 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

例如：

集成第三方动画

在Vue可以轻松的集成第三方成型的样式库或者是动画库，来辅助我们快速的实现一些特别炫酷的效果。

我们在这里以npm上的animate.css为例

​​install animate.css --save

引入这个库：

import 'animate.css'

由于我们引入的是css的库，不是js模块，所以我们直接跟路径就行了

再将​​animate__animated​​​ ，​​animate__bounce​​放入到你想使用的transition标签的name属性中去。

在transition标签中添加两个新的配置项​​enter-active-class​​​，​​leave-active-class​​。把选好的进入动画的名字，和离开动画的名字放在里面。

然后就ok了：

总结

Vue封装的过度与动画

准备好样式：

元素进入的样式：

v-enter：进入的起点v-enter-active：进入过程中v-enter-to：进入的终点

元素离开的样式：

v-leave：离开的起点v-leave-active：离开过程中v-leave-to：离开的终点

使用​​​​包裹要过度的元素，并配置name属性：

你好啊！

备注：若有多个元素需要过度，则需要使用：​​​​，且每个元素都要指定​​key​​值。如果是动画，则只需要使用到​​v-enter-active​​、​​v-leave-active​​。如果是过渡，可以都使用到。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。