动画

这里带大家了解下 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，其中包含以下类型的过场动画效果：

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

设置

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

分两种情况：

  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 上编辑此页！