之前写的两篇介绍动画和过渡的文章,一篇说的是使用动画,一篇说的是使用过渡效果,本文写一下初始渲染的过渡效果以及同时使用动画和过渡的效果:
初始渲染的过渡
一般情况下,我们默认打开页面的时候是没有过渡效果的,只有当点击了按钮才会触发进入/离开的动画和过渡效果,现在我们使用appear
特性就可以设置初始渲染的过渡效果
代码:
- <transition
- appear
- enter-active-class="animated slideInUp"
- leave-active-class="animated rollOut"
- appear-active-class="animated swing"
- >
- </transition>
只需要在transition
属性中添加appear
和appear-active-class
的指定样式。
appear
同样也可以自定义 CSS 类名。
没使用appear的效果:点我查看
使用appear的效果:点我查看
同时使用动画和过渡
因为我们使用了animate.css库, animate.css库是一个动画的效果,所以我们再加入过渡效果就可以了,具体做法:
- <transition
- name="fade"
- appear
- enter-active-class="animated swing fade-enter-active"
- leave-active-class="animated shake fade-leave-active"
- appear-active-class="animated swing"
- >
- </transition>
在transition
属性中添加过渡效果的css样式,fade-enter-active
和fade-leave-active
即可:
- .fade-enter-active, .fade-leave-active{
- transition: opacity 3s;
- }
- .fade-leave-to, .fade-enter{
- opacity:0;
- }
时间问题
有时候动画的时长和过渡的时长不一致,那么我们要以哪个时长为准呢?我们上面的代码设置过渡的时长为3s
,然后我们打开animate.css库的源码,发现里面显示swing的动画效果时长为1s
如果animation
很快的被触发并完成了,而 transition
效果还没结束,在这种情况中,我们可以使用 type
特性并设置type值为 animation
或 transition
来明确声明需要 vue 监听的类型,这样可以告诉vue动画/过渡完成的时间。
因为3s>1s,所以时长以过渡的时长为主。
代码:
- <transition
- name="fade"
- type="transition"
- enter-active-class="animated swing fade-enter-active"
- leave-active-class="animated shake fade-leave-active"
- >
- </transition>
我们只需要设置type值为transition
即可,意思就是以transition
的时长为结束时间。
duration
我们现在是靠type值为transition
或者animation
来设置动画的总时长,那么可以自定义时长为多少吗?可以的,只需要使用transition
组件上的 duration
属性定制一个显性的过渡持续时间 (以毫秒计):
- <transition
- name="fade"
- :duration="10000"
- enter-active-class="animated swing fade-enter-active"
- leave-active-class="animated shake fade-leave-active"
- >
- </transition>
"10000"表示过渡持续时间为10s
除了这种写法,我们也可以定制进入和移出的持续时间:
- <transition
- name="fade"
- :duration="{enter:5000 , leave:1000}"
- enter-active-class="animated swing fade-enter-active"
- leave-active-class="animated shake fade-leave-active"
- >
- </transition>
enter表示进场,leave表示离场,值分别为5s和1s
