HIPS-UNI-UI

# Transition 动画容器

# 使用指南

import Transition from '@hips/uni-ui/lib/transition';

export default {
  components: {
    'hips-transition': Transition,
  },
};
1
2
3
4
5
6
7

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-transition v-model="show" name="fade" custom-class="custom-class">
</hips-transition>
1
2
export default {
  data() {
    return {
      show: false,
    };
  },
};
1
2
3
4
5
6
7
.custom-class {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  background-color: #1989fa;
}
1
2
3
4
5
6
7
8
9

# 自定义样式

<hips-transition
  v-model="show"
  enter-class="cust-enter-class"
  enter-active-class="cust-enter-active-class"
  leave-active-class="cust-leave-active-class"
  leave-to-class="cust-leave-to-class"
>
</hips-transition>
1
2
3
4
5
6
7
8
.cust-enter-active-class,
.cust-leave-active-class {
  transition-property: background-color, transform;
}

.cust-enter-class,
.cust-leave-to-class {
  background-color: red;
  transform: rotate(-360deg) translate3d(-100%, -100%, 0);
}
1
2
3
4
5
6
7
8
9
10

# API

参数 说明 类型 可选值 默认值
value v-model 绑定，控制显示隐藏 Boolean - false
duration 动画时长 [Number, String, Object] - 300
name 动画名称 String - -
enter-class transition enter-class String - enter-class
enter-active-class transition enter-active-class String - enter-active-class
enter-to-class transition enter-to-class String - enter-to-class
leave-class transition leave-class String - leave-class
leave-active-class transition leave-active-class String - leave-active-class
leave-to-class transition leave-to-class String - leave-to-class
custom-class 容器自定义样式类 String - -
custom-style 容器自定义样式 String - -

注意

  1. 默认 name 参数为 null
  2. name 可选值 [fade, fade-up, fade-down, fade-left, fade-right, slide-up, slide-down, slide-left, slide-right]
  3. 如果设定 name，则 [enter-class, enter-active-class, enter-to-class, leave-class, leave-active-class, leave-to-class] 参数不起作用
  4. 如果 name 可选值不能实现效果，可以自定义动画，不设定 name 参数，设定 [enter-class, enter-active-class, enter-to-class, leave-class, leave-active-class, leave-to-class] 及对应样式
  5. 自定义样式参考
.cust-enter-active-class,
.cust-leave-active-class {
  transition-property: background-color, transform;
}

.cust-enter-class,
.cust-leave-to-class {
  background-color: red;
  transform: rotate(-360deg) translate3d(-100%, -100%, 0);
}
1
2
3
4
5
6
7
8
9
10
  1. 请注意样式穿透问题

# Events

名称 说明 参数
before-enter 进入前事件 -
enter 进入中事件 -
after-enter 进入动画完成后事件 -
before-leave 离开前事件 -
before-leave 离开中事件 -
before-leave 离开动画完成后事件 -

Input 输入框