过渡 Transition

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

    动画类型

    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>
    1. linbeforeenter 入场动画开始之前触发
    2. linenter 入场动画开始之后、结束之前触发
    3. linafterenter 入场动画结束之后触发
    4. linbeforeleave 出场动画开始前触发
    5. linleave 出场动画开始之后、结束之前触发
    6. linafterleave 出场动画结束之后触发
    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.         show="{{ show }}"
    2.         duration="400"
    3.         name=""
    4.         l-class="case-custom-class"
    5.         l-enter-active-class="lin-enter-active-class"
    6.         l-leave-active-class="lin-leave-active-class"
    7.         l-enter-class="lin-enter-class"
    8.         l-leave-to-class="lin-leave-to-class"
    9. >
    10.   <view class="sku">
    11.     <view class="sku-card-container">
    13.               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"
    14.               title="新疆精选苹果"
    15.               type="primary">
    16.         <view class="sku-card-content">
    17.           <view>新疆苹果,又名塞威氏苹果,蔷微科,落叶乔木。</view>
    18.           <view class="sku-card-price">
    19.             <l-price unit="￥" value="666"></l-price>
    20.           </view>
    21.         </view>
    22.       </l-card>
    23.     </view>
    24.     <view class="sku-tag-container">
    25.       <view class="sku-tag-title">规格分类</view>
    26.       <view class="sku-tag-list">
    27.         <l-tag l-class="tag-item" bg-color="#eee" font-color="#333" size="mini">试用装1个</l-tag>
    28.         <l-tag l-class="tag-item" bg-color="#eee" font-color="#333" size="mini">散装5kg装（约4-5个）</l-tag>
    29.         <l-tag l-class="tag-item" bg-color="#eee" font-color="#333" size="mini">散装10kg装（约9-11个）</l-tag>
    30.         <l-tag l-class="tag-item" bg-color="#eee" font-color="#333" size="mini">散装12kg装（约10-12个）</l-tag>
    31.         <l-tag l-class="tag-item" bg-color="#eee" font-color="#333" size="mini">小号 1 箱装（约8kg）</l-tag>
    32.         <l-tag l-class="tag-item" bg-color="#eee" font-color="#333" size="mini">中号 1 箱装（约12kg）</l-tag>
    33.         <l-tag l-class="tag-item" bg-color="#eee" font-color="#333" size="mini">大号 1 箱装（约16kg）</l-tag>
    34.       </view>
    35.     </view>
    36.     <view class="sku-action">
    37.       <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>
    38.       <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>
    39.     </view>
    40.   </view>
    41. </l-transition>
    1. Page({
    3.   /**
    4.    * 页面的初始数据
    5.    */
    6.   data: {
    7.     show: false,
    8.   },
    10.   openCase() {
    11.     this.setData({
    12.       show: true
    13.     });
    14.   },
    15.   closeCase() {
    16.     this.setData({
    17.       show: false
    18.     });
    19.   }
    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. {
    2.   "usingComponents": {
    3.     "l-transition":"/dist/transition/index",
    4.     "l-status":"/dist/status/index"
    5. }

    动画属性（Transition Attributes）

    动画外部样式类 (Transition ExternalClasses)

    动画类型 (Transition Type)