如何使用vue动画,transition组件

举报
前端老实人 发表于 2022/01/11 10:27:30 2022/01/11
【摘要】 同时使用过渡和动画可使用 type 属性,来声明需要 Vue 监听的类型,type值可为 animation 或 transition 。当不设置type时,默认会取 transitioned 和 animationed 两者更长的为结束时刻。 显性的过渡时间在一些情况下,Vue可以自动得出过渡效果的完成时机,从而对dom进行处理。但是有些时候,我们会设置一系列的过渡效果,例如嵌套元素也有...

同时使用过渡和动画

可使用 type 属性,来声明需要 Vue 监听的类型,type值可为 animation 或 transition 。

当不设置type时,默认会取 transitioned 和 animationed 两者更长的为结束时刻。

显性的过渡时间

在一些情况下,Vue可以自动得出过渡效果的完成时机,从而对dom进行处理。

但是有些时候,我们会设置一系列的过渡效果,例如嵌套元素也有过渡动效,其过渡效果的时间长于父元素。此时我们可以设置duration属性,定制一个显性的过渡持续时间(以毫秒记):

<transition :duration="1000">...</transition>

也可以定制进入和移出的持续时间:

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

初始渲染的过渡

可以通过 appear attribute 设置节点在初始渲染的过渡。

和进入/离开过渡一样,同样也可以自定义 CSS 类名。如:

appear-class="appear-enter"
appear-active-class="appear-enter-active"
appear-to-class="appear-enter-to"

JavaScript 钩子

可以在属性中声明 JavaScript 钩子:

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"

  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
>
   <!-- ... --> 
</transition>
  • before-enter 动画入场前,可以在其中设置元素开始动画之前的起始样式
  • enter 动画入场中,可以在其中写动画
  • after-enter 动画完成后
  • enter-cancelled 取消动画

对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”,Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

设置了 appear 特性的 transition 组件,也存在自定义 JavaScript 钩子:

<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
   <!-- ... --> 
</transition>

结合 Velocity.js

Velocity.js 官网地址:Velocity.js 安装方式: npm install velocity-animate

最后

如果对您有帮助,希望能给个👍评论/收藏/三连!

博主为人老实,无偿解答问题哦❤

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。