过渡 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>
  4. <l-transition show="{{ show }}" name="slide-up">
  5. 林间有风
  6. </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. },
  5. entering() {
  6. console.log('入场动画正在进行中')
  7. },
  8. afterEnter() {
  9. console.log('入场动画完成')
  10. },
  11. beforeLeave() {
  12. console.log('出场动画准备开始')
  13. },
  14. leaving () {
  15. console.log('出场动画正在进行中')
  16. },
  17. afterLeave() {
  18. console.log('出场动画完成')
  19. },
  20. }

高级用法

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({
  2. /**
  3. * 页面的初始数据
  4. */
  5. data: {
  6. show: false,
  7. },
  8. openCase() {
  9. this.setData({
  10. show: true
  11. });
  12. },
  13. closeCase() {
  14. this.setData({
  15. show: false
  16. });
  17. }
  18. })
  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. }
  13. .lin-enter-active-class,
  14. .lin-leave-active-class {
  15. bottom: 0;
  16. }
  17. .lin-enter-class,
  18. .lin-leave-to-class {
  19. bottom: -100%;
  20. }
  21. .sku-card{
  22. box-shadow: none !important;
  23. }
  24. .sku-card-content{
  25. margin-top: 10rpx;
  26. color: #666;
  27. font-size: 26rpx;
  28. overflow: hidden;
  29. text-overflow: ellipsis;
  30. display: -webkit-box;
  31. -webkit-box-orient: vertical;
  32. -webkit-line-clamp: 5;
  33. }
  34. .sku-card-price{
  35. margin-top: 10rpx;
  36. }
  37. .sku-tag-title{
  38. padding-left: 20rpx;
  39. margin-bottom: 20rpx;
  40. }
  41. .sku-tag-list{
  42. display: flex;
  43. flex-wrap: wrap;
  44. }
  45. .tag-item{
  46. margin: 10rpx;
  47. }
  48. .sku-action{
  49. display: flex;
  50. margin-top: 20rpx;
  51. }
  52. .sku-action-container{
  53. flex: 1;
  54. }
  55. .sku-action-item{
  56. width: 100% !important;
  57. }
  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({
  2. /**
  3. * 页面的初始数据
  4. */
  5. data: {
  6. show: false,
  7. },
  8. openCase() {
  9. this.setData({
  10. show: true
  11. });
  12. },
  13. closeCase() {
  14. this.setData({
  15. show: false
  16. });
  17. }
  18. })
  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. }
  12. .lin-enter-active-class,
  13. .lin-leave-active-class {
  14. left: 0;
  15. top: 0;
  16. }
  17. .lin-enter-class,
  18. .lin-leave-to-class {
  19. left: -100%;
  20. top: -100%;
  21. }
  1. {
  2. "usingComponents": {
  3. "l-transition":"/dist/transition/index",
  4. "l-status":"/dist/status/index"
  5. }
  6. }

动画属性(Transition Attributes)

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

动画事件 (Transition Events)

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

动画外部样式类 (Transition ExternalClasses)

外部样式类名说明备注
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 被删除),在过渡/动画完成之后移除。—-

动画类型 (Transition Type)

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