Transition 动画

介绍

使元素从一种样式逐渐变化为另一种样式的效果。

引入

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

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

代码演示

基础用法

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

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

动画类型

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

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

高级用法

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

  1. <van-transition
  2. show="{{ show }}"
  3. name=""
  4. duration="{{ { enter: 300, leave: 1000 } }}"
  5. enter-class="van-enter-class"
  6. enter-active-class="van-enter-active-class"
  7. leave-active-class="van-leave-active-class"
  8. leave-to-class="van-leave-to-class"
  9. />
  1. .van-enter-active-class,
  2. .van-leave-active-class {
  3. transition-property: background-color, transform;
  4. }
  5. .van-enter-class,
  6. .van-leave-to-class {
  7. background-color: red;
  8. transform: rotate(-360deg) translate3d(-100%, -100%, 0);
  9. }

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