@xsyx/hanzo-transition v0.1.0

Transition 动画

使用指南

在 app.json 或 index.json 中引入组件

"usingComponents": {
  "hanzo-transition": "path/to/hanzot-weapp/dist/transition/index"
}

代码演示

基础用法

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

<hanzo-transition show="{{ show }}" custom-class="block">
  内容
</hanzo-transition>

动画类型

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

<hanzo-transition name="fade-up" />

高级用法

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

<hanzo-transition
  show="{{ show }}"
  name=""
  duration="{{ { enter: 300, leave: 1000 } }}"
  enter-class="hanzo-enter-class"
  enter-active-class="hanzo-enter-active-class"
  leave-active-class="hanzo-leave-active-class"
  leave-to-class="hanzo-leave-to-class"
/>

.hanzo-enter-active-class,
.hanzo-leave-active-class {
  transition-property: background-color, transform;
}

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

API

动画类型

todo 动画类型

• 缩放对应的效果