Vue中同时使用动画和过渡

2019年3月18日09:33:51 发表评论 67 阅读

Vue中同时使用动画和过渡

之前写的两篇介绍动画和过渡的文章,一篇说的是使用动画,一篇说的是使用过渡效果,本文写一下初始渲染的过渡效果以及同时使用动画和过渡的效果:

初始渲染的过渡

一般情况下,我们默认打开页面的时候是没有过渡效果的,只有当点击了按钮才会触发进入/离开的动画和过渡效果,现在我们使用appear特性就可以设置初始渲染的过渡效果代码:

  1. <transition
  2.             appear
  3.             enter-active-class="animated slideInUp"
  4.             leave-active-class="animated rollOut"
  5.             appear-active-class="animated swing"
  6.     >
  7.     </transition>

只需要在transition属性中添加appearappear-active-class的指定样式。

appear同样也可以自定义 CSS 类名。

没使用appear的效果:点我查看

使用appear的效果:点我查看

同时使用动画和过渡

因为我们使用了animate.css库, animate.css库是一个动画的效果,所以我们再加入过渡效果就可以了,具体做法:

  1. <transition
  2.             name="fade"
  3.             appear
  4.             enter-active-class="animated swing fade-enter-active"
  5.             leave-active-class="animated shake fade-leave-active"
  6.             appear-active-class="animated swing"
  7.     >
  8. </transition>

transition属性中添加过渡效果的css样式,fade-enter-activefade-leave-active即可:

  1. .fade-enter-active, .fade-leave-active{
  2.             transition: opacity 3s;
  3.         }
  4.         .fade-leave-to, .fade-enter{
  5.             opacity:0;
  6.         }

时间问题

有时候动画的时长和过渡的时长不一致,那么我们要以哪个时长为准呢?我们上面的代码设置过渡的时长为3s,然后我们打开animate.css库的源码,发现里面显示swing的动画效果时长为1s

如果animation很快的被触发并完成了,而 transition 效果还没结束,在这种情况中,我们可以使用 type 特性并设置type值为 animationtransition 来明确声明需要 vue 监听的类型,这样可以告诉vue动画/过渡完成的时间。

因为3s>1s,所以时长以过渡的时长为主。

代码:

  1. <transition
  2.             name="fade"
  3.             type="transition"
  4.             enter-active-class="animated swing fade-enter-active"
  5.             leave-active-class="animated shake fade-leave-active"
  6.     >
  7. </transition>

我们只需要设置type值为transition即可,意思就是以transition的时长为结束时间。

duration

我们现在是靠type值为transition或者animation来设置动画的总时长,那么可以自定义时长为多少吗?可以的,只需要使用transition 组件上的 duration属性定制一个显性的过渡持续时间 (以毫秒计):

  1. <transition
  2.             name="fade"
  3.             :duration="10000"
  4.             enter-active-class="animated swing fade-enter-active"
  5.             leave-active-class="animated shake fade-leave-active"
  6.     >
  7.     </transition>

"10000"表示过渡持续时间为10s

除了这种写法,我们也可以定制进入和移出的持续时间:

  1. <transition
  2.             name="fade"
  3.             :duration="{enter:5000 , leave:1000}"
  4.             enter-active-class="animated swing fade-enter-active"
  5.             leave-active-class="animated shake fade-leave-active"
  6.     >
  7. </transition>

enter表示进场,leave表示离场,值分别为5s和1s
 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛