## 动画

这里带大家了解下 Mobilebone 中过场动画的实现与设置。

### 实现

Mobilebone 中的过场动画是通过 CSS `animation` 属性实现的。

通过添加类名 `'in'` 让页面元素显示，通过添加类名 `'out'` 让页面元素隐藏，而类名 `'reverse'` 可以让动画反向执行，会用在返回这种场景中。其中，`'in'` 和 `'out'` 不能同时出现。

过场动画的类型也是通过类名设置的，默认的过程动画效果是左右滑动切换，和手机 APP 原生的过场效果一致，使用的是类名 `'slide'`。

例如，现在有一个页面元素的 HTML 代码是这样的：

    <div class="page out"></div>

则执行下面的 JS 语句就可以让这个页面元素从浏览器窗口右侧出现。

    page.classList.add('slide');
    page.classList.remove('out');
    page.classList.add('in');

当然，实际开发无需关心上面的细节，Mobilebone 已经在内部处理好了。

### 类型

Mobilebone 支持扩展过场动画类型，两种方法：

1. 开发者自定义；
2. 使用官方扩展；

#### 开发者自定义

开发者可以自定义任意的动画类名，然后写好和类名 `'in'`、`'out'`、`'reverse'` 组合样式即可，例如下面的CSS代码：

    .fade.out {
    	opacity: 0;
    	animation-duration: 125ms;
    	animation-name: fadeout;
    }
    .fade.in {
    	opacity: 1;
    	animation-duration: 225ms;
    	animation-name: fadein;
    }
    @keyframes fadein {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes fadeout {
        from { opacity: 1; }
        to { opacity: 0; }
    }

此时，只需要通过 Mobilebone 提供的 API 重置掉默认的 `'slide'` 为这里的 `'fade'` 就可以有自定义的淡入淡出过场效果了。

例如，本文档的上下移入移出效果就是使用的自定义的 `'slideup'` 过场效果。

#### 官方扩展

Mobilebone 官方提供了多种过场类型，都合在了专门的过场动画 CSS 文件中，在项目的 src 文件目录下，名为 mobilebone.animate.css，其中包含以下类型的过场动画效果：

- fade - 淡入淡出
- slideup - 上移/淡出
- slidedown - 下落/淡出
- pop - 放大缩小
- turn - 翻转（3D效果需要容器上设置类名 `'viewport-turn'`）
- flip = 弹入弹出（3D效果需要容器上设置类名 `'viewport-flip'`）
- flow - 流入流出

各个效果可以访问对应的测试页面体验。

### 设置

上面介绍了过场动画类型，这里讲下如何设置这些过场动画。

分两种情况：

1. 全局设置；
2. 局部设置；

#### 全局设置

全局改变 Mobilebone 过场动画类型需要使用 Mobilebone.classAnimation 这个API接口，例如：

    Mobilebone.classAnimation = 'fade';

这个时候，当页面过场发生的时候，会在页面元素上设置类名 `'fade'`，而不是默认的 `'slide'`。此时，只要有对应的CSS动画设置，则过场的时候就会有你想要的动画效果出现了。

另外，也可以使用老的 `Mobilebone.form` 接口全局设置过场动画类型。

#### 局部设置

如果希望仅仅某一个页面的过场效果是特殊的，可以使用 `data-form` 在对应的页面元素上进行设置即可，例如：

    <div class="page out" data-form="flip"></div>

此时，上面的 HTML 代码对应的页面元素在显示和隐藏的时候就会使用“弹入弹出”这个过场动画效果。

发现错误？想参与编辑？在 GitHub 上编辑此页！