title: 过渡 Transition

过渡 Transition

通过使用transition给元素添加进入、离开的动画效果。

基础用法

将元素包裹在 transition 组件内，通过 show 属性控制元素的显示隐藏。当元素显示/隐藏时，会有相应的过渡动画。

  1. <l-transition show="{{ show }}">
  2.   林间有风
  3. </l-transition>

动画类型

transition 组件提供多种内置的动画效果，可以通过 name 字段指定动画类型。

  1. <l-transition show="{{ show }}" name="fade-in">
  2.   林间有风
  3. </l-transition>
  5. <l-transition show="{{ show }}" name="slide-up">
  6.   林间有风
  7. </l-transition>

动画时长

transition 组件可以通过设置 duration 的值来控制动画的时间，duration 可以接收一个数值或者对象：{enter: 1000, leave: 2000}

  1. <l-transition show="{{ show }}" name="fade-in" duration="600">
  2.   林间有风
  3. </l-transition>
  1. <l-transition show="{{ show }}" name="fade-in" duration="{{ { enter: 300, leave: 1000 } }}">
  2.   林间有风
  3. </l-transition>

动画事件

transition 组件提供了动画执行各状态的事件函数。

  1. linbeforeenter 入场动画开始之前触发
  2. linenter 入场动画开始之后、结束之前触发
  3. linafterenter 入场动画结束之后触发
  4. linbeforeleave 出场动画开始前触发
  5. linleave 出场动画开始之后、结束之前触发
  6. linafterleave 出场动画结束之后触发
  1. <l-transition
  2.       show="{{ show }}"
  3.       bind:linbeforeenter="beforeEnter"
  4.       bind:linenter="entering"
  5.       bind:linafterenter="afterEnter"
  6.       bind:linbeforeleave="beforeLeave"
  7.       bind:linleave="leaving"
  8.       bind:linafterleave="afterLeave"
  9.       name="slide-left"
  10. >
  11.   林间有风
  12. </l-transition>
  1. {
  2.   beforeEnter() {
  3.     console.log('入场动画准备开始')
  4.   },
  6.   entering() {
  7.     console.log('入场动画正在进行中')
  8.   },
  10.   afterEnter() {
  11.     console.log('入场动画完成')
  12.   },
  14.   beforeLeave() {
  15.     console.log('出场动画准备开始')
  16.   },
  18.   leaving () {
  19.     console.log('出场动画正在进行中')
  20.   },
  22.   afterLeave() {
  23.     console.log('出场动画完成')
  24.   },
  25. }

高级用法

transition 在动画的不同阶段会有不同的样式 class，如果 transition 内置的动画不能满足你的需要，完全可以通过外部样式类自定义过渡效果。在使用自定义动画时，需要给 transition 设置 name=""。

案例1. SKU 选择弹框

  1. <l-transition
  2.         show="{{ show }}"
  3.         duration="400"
  4.         name=""
  5.         l-class="case-custom-class"
  6.         l-enter-active-class="lin-enter-active-class"
  7.         l-leave-active-class="lin-leave-active-class"
  8.         l-enter-class="lin-enter-class"
  9.         l-leave-to-class="lin-leave-to-class"
  10. >
  11.   <view class="sku">
  12.     <view class="sku-card-container">
  13.       <l-card l-class="sku-card"
  14.               image="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1549701108&di=d141540da70a7f92abd6f90ffef7460c&src=http://ztd00.photos.bdimg.com/ztd/w=700;q=50/sign=0b1f180b5a43fbf2c52ca4238045bbbd/b7fd5266d0160924665b9f18dd0735fae6cd34b2.jpg"
  15.               title="新疆精选苹果"
  16.               type="primary">
  17.         <view class="sku-card-content">
  18.           <view>新疆苹果,又名塞威氏苹果,蔷微科,落叶乔木。</view>
  19.           <view class="sku-card-price">
  20.             <l-price unit="￥" value="666"></l-price>
  21.           </view>
  22.         </view>
  23.       </l-card>
  24.     </view>
  25.     <view class="sku-tag-container">
  26.       <view class="sku-tag-title">规格分类</view>
  27.       <view class="sku-tag-list">
  28.         <l-tag l-class="tag-item" bg-color="#eee" font-color="#333" size="mini">试用装1个</l-tag>
  29.         <l-tag l-class="tag-item" bg-color="#eee" font-color="#333" size="mini">散装5kg装（约4-5个）</l-tag>
  30.         <l-tag l-class="tag-item" bg-color="#eee" font-color="#333" size="mini">散装10kg装（约9-11个）</l-tag>
  31.         <l-tag l-class="tag-item" bg-color="#eee" font-color="#333" size="mini">散装12kg装（约10-12个）</l-tag>
  32.         <l-tag l-class="tag-item" bg-color="#eee" font-color="#333" size="mini">小号 1 箱装（约8kg）</l-tag>
  33.         <l-tag l-class="tag-item" bg-color="#eee" font-color="#333" size="mini">中号 1 箱装（约12kg）</l-tag>
  34.         <l-tag l-class="tag-item" bg-color="#eee" font-color="#333" size="mini">大号 1 箱装（约16kg）</l-tag>
  35.       </view>
  36.     </view>
  37.     <view class="sku-action">
  38.       <l-button width="100%" class="sku-action-container" l-class="sku-action-item" l-label-ckass="sku-action-item" shape="square" bind:tap="closeCase" data-name="2">确定</l-button>
  39.       <l-button width="100%" class="sku-action-container" l-class="sku-action-item" l-label-ckass="sku-action-item" shape="square" plain bind:tap="closeCase" data-name="2">取消</l-button>
  40.     </view>
  41.   </view>
  42. </l-transition>
  1. Page({
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     show: false,
  8.   },
  10.   openCase() {
  11.     this.setData({
  12.       show: true
  13.     });
  14.   },
  16.   closeCase() {
  17.     this.setData({
  18.       show: false
  19.     });
  20.   }
  22. })
  1. .case-custom-class{
  2.   position: fixed;
  3.   bottom: 0;
  4.   left: 0;
  5.   width: 100%;
  6.   /*height: 80%;*/
  7.   background-color: #ffffff;
  8.   border-top: 2rpx solid #ccc;
  9.   border-radius: 20rpx 20rpx 0 0;
  10.   z-index: 1;
  11.   box-shadow: 0 -1px 40px rgba(0,0,0,.3);
  12. }
  15. .lin-enter-active-class,
  16. .lin-leave-active-class {
  17.   bottom: 0;
  18. }
  20. .lin-enter-class,
  21. .lin-leave-to-class {
  22.   bottom: -100%;
  23. }
  25. .sku-card{
  26.   box-shadow: none !important;
  27. }
  29. .sku-card-content{
  30.   margin-top: 10rpx;
  31.   color: #666;
  32.   font-size: 26rpx;
  33.   overflow: hidden;
  34.   text-overflow: ellipsis;
  35.   display: -webkit-box;
  36.   -webkit-box-orient: vertical;
  37.   -webkit-line-clamp: 5;
  38. }
  40. .sku-card-price{
  41.   margin-top: 10rpx;
  42. }
  44. .sku-tag-title{
  45.   padding-left: 20rpx;
  46.   margin-bottom: 20rpx;
  47. }
  49. .sku-tag-list{
  50.   display: flex;
  51.   flex-wrap: wrap;
  52. }
  54. .tag-item{
  55.   margin: 10rpx;
  56. }
  58. .sku-action{
  59.   display: flex;
  60.   margin-top: 20rpx;
  61. }
  63. .sku-action-container{
  64.   flex: 1;
  65. }
  67. .sku-action-item{
  68.   width: 100% !important;
  69. }
  1. {
  2.   "usingComponents": {
  3.     "l-transition":"/dist/transition/index",
  4.     "l-button":"/dist/button/index",
  5.     "l-card": "/dist/card/index",
  6.     "l-price": "/dist/price/index",
  7.     "l-tag": "/dist/tag/index",
  8.     "l-icon": "/dist/icon/index"
  9.   }
  10. }

案例2. 遮照页

  1. <l-transition
  2.     show="{{ show }}"
  3.     duration="300"
  4.     name=""
  5.     l-class="case-custom-class"
  6.     l-enter-active-class="lin-enter-active-class"
  7.     l-leave-active-class="lin-leave-active-class"
  8.     l-enter-class="lin-enter-class"
  9.     l-leave-to-class="lin-leave-to-class"
  10.   >
  11.   <l-status show type="cart" full-screen="{{false}}" bind:lintap="closeCase"/>
  12. </l-transition>
  1. Page({
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     show: false,
  8.   },
  10.   openCase() {
  11.     this.setData({
  12.       show: true
  13.     });
  14.   },
  16.   closeCase() {
  17.     this.setData({
  18.       show: false
  19.     });
  20.   }
  22. })
  1. .case-custom-class{
  2.   position: fixed;
  3.   top: 0;
  4.   left: 0;
  5.   width: 100%;
  6.   height: 100%;
  7.   background: #ffffff;
  8.   display: flex;
  9.   align-items: center;
  10.   justify-content: center;
  11. }
  14. .lin-enter-active-class,
  15. .lin-leave-active-class {
  16.   left: 0;
  17.   top: 0;
  18. }
  20. .lin-enter-class,
  21. .lin-leave-to-class {
  22.   left: -100%;
  23.   top: -100%;
  24. }
  1. {
  2.   "usingComponents": {
  3.     "l-transition":"/dist/transition/index",
  4.     "l-status":"/dist/status/index"
  5.   }
  6. }

动画属性

参数 说明 类型 可选值 默认值
name 动画类型 String 见下方动画类型 fade
show 是否展示组件 boolean true/false true
duration 动画时长，单位为毫秒 number/object - 300
custom-style 自定义样式 String - -

动画事件

事件名称 说明 返回值 备注
bind:linbeforeenter 进入前触发 - -
bind:linenter 进入中触发 - -
bind:linafterenter 进入后触发 - -
bind:linbeforeleave 离开前触发 - -
bind:linleave 离开中触发 - -
bind:linafterleave 离开后触发 - -

动画外部样式类

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

动画类型

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