大家好，这是小程序系列的第十七篇文章，在这一个阶段，我们的目标是 由简单入手，逐渐的可以较为深入的了解组件化开发，从本文开始，将记录分享lin-ui的源码分析，期望通过对lin-ui源码的学习能加深组件化开发的能力：
1.《微信小程序-进阶篇》Lin-ui组件库源码分析-Button组件（一）
2.《微信小程序-进阶篇》package.json必须掌握的字段知识（二）
3.《微信小程序-进阶篇》Lin-ui组件库源码分析-Icon组件
——
求关注，求收藏，求点赞，这是一个系列文章，建议专栏收藏，肯定分享的都是跟小程序相关的，旨在能提高在小程序中的能力，谢谢～

前言

上一篇我们介绍了 Icon组件，我们先是了解了一下其各个属性的用法，之后从属性入手具体分析了各个属性在其内部是如何实现的，本篇则开始一个新的组件——Transition动画组件，这是一个 非常有意思的组件，耐心看完，你一定有所收获~

阅读对象与难度

本文难度属于：初中级，通过本文你可以了解到 Lin-ui的Transition组件的使用以及如何实际应用在我们的项目中，之后我们才开始针对各个属性分析其源码是如何实现的，本文主要内容参考以下思维导图：

Transition的使用

简介

Transition是什么呢，先看官方的解释，如下：

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

简单的说，它就是一个 自带动画的组件，这个组件的 主要用途是用来做视图的切换，比如页面中某个区域是有2个组件来回切换显示的，你希望 A组件 切换成 B组件 时有一个 淡入淡出的效果 如果我们自己来写，可能要从头开始写，包括css的动画部分，但是如果使用Lin-Ui的 Transition组件，那么这些功能都已经实现了，直接可以使用；

效果

看看效果吧，可能更加直观

通过按钮控制绿色文字区域的显示隐藏，可以看出 显示/隐藏的切换过程中明显有一个淡入淡出的效果～

用法

基本用法

基础用法还是很简单的，通过 show 这个属性来实现组件的显示与隐藏，如下

<l-transition show="{{ show }}">
  Oliver尹
l-transition>
1
2
3

比如，我们通过按钮来控制区域的显示与隐藏，其实就是通过按钮来控制show这个属性的值为true还是false，比如：

<l-transition show="{{ show }}">
  Oliver尹
l-transition>

<button bind:tap="handleClick">{{show?"隐藏":"显示"}}button>

// pages/index/index.ts
Page({
  /**
   * 页面的初始数据
   */
  data: {
    show:false
  },
  handleClick(){
    this.setData({
      show:!this.data.show
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

动画类型

当然，Lin-UI既然是一个 成熟的组件库，那它必然不可能只有一种动画效果，动画的类型是通过一个名为 name 的属性来设定的，它的值 默认为fade，也就是说如果不设定，等同如下

<l-transition show="{{ show }}">
  Oliver尹
l-transition>



<l-transition show="{{ show }}" name="fade">
  Oliver尹
l-transition>
1
2
3
4
5
6
7
8
9

当然，如果要 使用别的动画类型，只需要修改 name 的值即可，官网一共提供了 9种动画 具体属性值如下：

我们在演示一个动画效果，以 fade-left 为例，代码如下

<l-transition show="{{ show }}" name="fade-left">
  Oliver尹
l-transition>
1
2
3

效果如下：

动画时长

除了动画，那动画的持续时间也是可以设置的，对应的属性为 duration，它的值为一个可转化为数字的字符串，单位为毫秒，演示代码如下：

<l-transition show="{{ show }}" name="fade" duration="600">
  Oliver尹
</l-transition>
1
2
3

或者一个带有 enter 和 leave 的对象，通过 设定enter来规定DOM进入的动画时间，leave来设定DOM的离开动画时间

<l-transition show="{{ show }}" name="fade-in" duration="{{ { enter: 300, leave: 1000 } }}">
  Oliver尹
</l-transition>
1
2
3

这种方式可以更加定制化的针对一些特殊的交互效果，虽然情况相对比较少…

动画事件

什么是动画事件，简单的说，就是在动画执行的过程中，比如动画开始执行的那一个刹那，动画结束的那一个刹那，在这些刹那发生的时候，我们希望能做一些处理，Transition 给我们预留了一个钩子函数，通过这个钩子函数我们可以在指定的时机运行我们的函数，先看一个例子吧

<l-transition
      show="{{ show }}"
      bind:linenter="entering"
      name="slide-left"
>
   Oliver尹
</l-transition>
1
2
3
4
5
6
7

比如上文中的 bind:linenter，这个钩子函数代表 在入场动画开始之后、结束之前触发，简单的说就是名为 entering 的这个函数会在动画入场之后触发，看个效果图吧
和动画类型一样，Lin-UI提供的钩子函数肯定不止这一种，它一共提供了 6种钩子函数，具体如下：

具体放到代码中的话如下：

<l-transition
      show="{{ show }}"
      bind:linbeforeenter="beforeEnter"
      bind:linenter="entering"
      bind:linafterenter="afterEnter"
      bind:linbeforeleave="beforeLeave"
      bind:linleave="leaving"
      bind:linafterleave="afterLeave"
      name="slide-left"
>
  Oliver尹
</l-transition>
1
2
3
4
5
6
7
8
9
10
11
12

小项目练习

仿App欢迎页

题目描述
现在有一个小程序存在欢迎页，同时还有一个倒计时，倒计时5s后关闭视图（非路由跳转到新页面，仅仅是关闭视图），关闭有一个淡入淡出的效果。
效果：

代码：

<view class="boss-welcome">
   <l-transition show="{{ show }}" name="fade">
      <view class="boss-welcome-main">倒计时：{{time}}view>
    l-transition>
view>

1
2
3
4
5
6
7

// pages/welcome/index.ts
Page({
  /**
   * 页面的初始数据
   */
  data: {
    show:true,
    time:5
  },
  handleClick(){
    this.setData({
      show:!this.data.show
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    const countDown = ()=>{
      setTimeout(()=>{
        this.setData({
          time:this.data.time-1
        })
        if(this.data.time>0){
          countDown()
        }
        else{
          this.setData({
            show:false
          })  
        }
      },1000)
    }
    countDown()
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

小结

本文我们主要讲述了Lin-UI中的 动画组件Transition 的用法，了解了它的 动画类型，动画时长以及动画的各个时间节点的钩子函数，通过这些学习我们知道 Transition组件 就是一个 动画组件，它最大的用处就是如何 协助我们在页面或者视图进行切换的时候交互可以更加优秀，过渡更加舒适不生硬，最后我们通过一个小demo练习了这个动画组件；
接下来，我们将依据用法来学习Transition组件的源码～
(PS：都已经看到这里了，点个赞，求个关注吧，万分感谢～)