Transition 动画

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-transition": "path/to/@vant/weapp/dist/transition/index"
  3. }

代码演示

基础用法

将元素包裹在 transition 组件内,在元素展示/隐藏时,会有相应的过渡动画

  1. <van-transition show="{{ show }}" custom-class="block">
  2. 内容
  3. </van-transition>

动画类型

transition 组件内置了多种动画,可以通过name字段指定动画类型

  1. <van-transition name="fade-up" />

高级用法

可以通过外部样式类自定义过渡效果,还可以定制进入和移出的持续时间:

<van-transition
  show="{{ show }}"
  name=""
  duration="{{ { enter: 300, leave: 1000 } }}"
  enter-class="van-enter-class"
  enter-active-class="van-enter-active-class"
  leave-active-class="van-leave-active-class"
  leave-to-class="van-leave-to-class"
/>
.van-enter-active-class,
.van-leave-active-class {
  transition-property: background-color, transform;
}

.van-enter-class,
.van-leave-to-class {
  background-color: red;
  transform: rotate(-360deg) translate3d(-100%, -100%, 0);
}

API

Props

参数说明类型默认值版本
name动画类型stringfade-
show是否展示组件booleantrue-
duration动画时长,单位为毫秒number | object300-
custom-style自定义样式string--

Events

事件名说明参数
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
enter-class定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
enter-active-class定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
enter-to-class定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除),在过渡/动画完成之后移除。
leave-class定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
leave-active-class定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
leave-to-class定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除),在过渡/动画完成之后移除。

动画类型

名称说明
fade淡入
fade-up上滑淡入
fade-down下滑淡入
fade-left左滑淡入
fade-right右滑淡入
slide-up上滑进入
slide-down下滑进入
slide-left左滑进入
slide-right右滑进入

Transition 动画 - 图1