Skip to content

Animation 动画

内置的过渡动画组件,基于 Vue 的 <Transition> 组件封装,提供常用的动画效果。

基础用法

通过 name 属性指定动画效果。

滑动动画

支持四个方向的滑动动画:slide-topslide-bottomslide-leftslide-right

缩放动画 (Zoom)

支持多个方向的缩放动画:zoom-in-centerzoom-in-topzoom-in-bottomzoom-in-leftzoom-in-rightzoom-in-top-leftzoom-in-top-rightzoom-in-bottom-leftzoom-in-bottom-right

折叠动画 (Collapse)

使用 collapse 实现折叠展开效果。

Animation API

Animation Attributes

属性名说明类型可选值默认值
name动画名称stringfade / scale / slide-top / slide-bottom / slide-left / slide-right / zoom-in-center / zoom-in-top / zoom-in-bottom / zoom-in-left / zoom-in-right / zoom-in-top-left / zoom-in-top-right / zoom-in-bottom-left / zoom-in-bottom-right / collapse

Animation Slots

插槽名说明
default需要进行动画的元素