Skip to content

Transition 动画

基本用法

将元素包裹在 wd-transition 标签中,并设置 show 来切换显隐,设置 name 选择动画。

html
<wd-transition :show="show" name="fade">内容</wd-transition>

动画类型

wd-transition 内置了常用的动画,如 fadeslidezoom-in 等。

html
<wd-transition :show="show" name="slide">内容</wd-transition>

动画时间

可以通过 duration 设置动画执行时间,动画拆分为 enter 进入动画和 leave 离开动画,duration 可以分别设置进入动画执行时间和离开动画执行时间: { enter: 300, leave: 500 }

自定义动画

可以通过 enter-classenter-active-classenter-to-classleave-classleave-active-classleave-to-class 设置自定义动画的类名。

在动画进入时,会给标签设置 enter-classenter-active-class 样式,在下一帧切换为 enter-to-classenter-active-class 样式,因此进入动画是从 enter-class 样式切换为 enter-to-class 样式状态,enter-active-class 设置 transition 相关属性。

在动画离开时,会给标签设置 leave-classleave-active-class 样式,在下一帧切换为 leave-to-classleave-active-class 样式,因此离开动画是从 leave-class 样式切换为 leave-to-class 样式状态,leave-active-class 设置 transition 相关属性。

html
<wd-transition
  :show="customShow"
  :duration="{ enter: 700, leave: 1000 }"
  enter-class="custom-enter"
  enter-active-class="custom-enter-active"
  enter-to-class="custom-enter-to"
  leave-class="custom-leave"
  leave-active-class="custom-leave-active"
  leave-to-class="custom-leave-to"
  custom-class="block"
/>
scss
:deep(button) {
  margin: 0 10px 10px 0;
}
:deep(.block) {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
  width: 100px;
  height: 100px;
  background: #0083ff;
}

:deep(.custom-enter-active),
:deep(.custom-leave-active) {
  transition-property: background, transform;
}
:deep(.custom-enter) {
  transform: translate3d(-100px, -100px, 0) rotate(-180deg);
  background: #ff0000;
}
:deep(.custom-leave-to) {
  transform: translate3d(100px, 100px, 0) rotate(180deg);
  background: #ff0000;
}

Attributes

参数说明类型可选值默认值最低版本
show是否展示组件boolean---
name动画类型stringfade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in--
duration动画执行时间number / boolean-300(ms)-
custom-style自定义样式string---

Events

事件名称说明参数最低版本
beforeenter进入前触发--
enter进入时触发--
afterenter进入后触发--
beforeleave离开前触发--
leave离开时触发--
afterleave离开后触发--

外部样式类

类名说明最低版本
custom-class根节点样式-
enter-class定义进入过渡的开始状态,在元素被插入前生效,在插入的下一帧移除-
enter-active-class定义动画执行期间的状态,在整个进入动画中应用;在元素被插入前生效,在动画结束后移除;可以定义 transition 相关属性-
enter-to-class定义进入过渡的结束状态,在元素被插入的下一帧生效,在动画结束后移除-
leave-class定义离开过渡的开始状态,在离开动画触发时立即生效,在下一帧移除-
leave-active-class定义动画执行期间的状态,在整个离开动画中应用;在离开动画触发时立即生效,在动画结束后移除;可以定义 transition 相关属性-
leave-to-class定义离开过渡的结束状态,在离开动画触发时的下一帧生效,在动画结束后移除-

Released under the MIT License.

Released under the MIT License.