如何使用vue动画,transition组件
【摘要】 同时使用过渡和动画可使用 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)