JQuery Mobile转场分析

关于使用JQM(JQuery Mobile)看到很多人提出的第一句话就是性能不行,再问就是转场闪屏等.这里就分享下我对转场的一些学习成果.


JQM的转场实际上利用的全部是CSS,只是简单的一个addClass 和removeClass.下面是带动画转场的函数

function css3TransitionHandler( name, reverse, $to, $from ) {

	var deferred = new $.Deferred(),
		reverseClass = reverse ? " reverse" : "",
		viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
		doneFunc = function() {

			$to.add( $from ).removeClass( "out in reverse " + name );

			if ( $from && $from[ 0 ] !== $to[ 0 ] ) {
				$from.removeClass( $.mobile.activePageClass );
			}

			$to.parent().removeClass( viewportClass );

			deferred.resolve( name, reverse, $to, $from );
		};

	$to.animationComplete( doneFunc );

	$to.parent().addClass( viewportClass );

	if ( $from ) {
		$from.addClass( name + " out" + reverseClass );
	}
	$to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );

	return deferred.promise();
}

从中可以看到,只有各种的样式切换,除此以外别无它物.至于 $.Deferred()是JQuery提供的延迟处理的机制,这里不做讨论.

简单看看这个函数的4个参数,分别是转场效果名称、是否回退、前一页面jq对象、目标页面jq对象。处理的逻辑描述起来也非常简单:

1.是否存在前一个页面,存在增加out
2.为目标页面增加in和激活页面样式
3.当页面动画完成删除前一个页面的激活页面样式和目标页面转场样式


接下来看看CSS部分，其实所有的东西都可以用一个transform(至于transform这里也不做解释)搞定，以slide为例

.slide.out {
	-webkit-transform: translateX(-100%);
	-webkit-animation-name: slideouttoleft;
}

.slide.in {
	-webkit-transform: translateX(0);
	-webkit-animation-name: slideinfromright;
}

.slide.out.reverse {
	-webkit-transform: translateX(100%);
	-webkit-animation-name: slideouttoright;
}

.slide.in.reverse {
	-webkit-transform: translateX(0);
	-webkit-animation-name: slideinfromleft;
}

实际上就是通过-webkit-animation-name指定了一组动画效果

@-webkit-keyframes slideinfromright {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideinfromleft {
    from { -webkit-transform: translateX(-100%); }
    to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-100%); }
}

@-webkit-keyframes slideouttoright {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(100%); }
}

所以如果需要扩展自己的类型，只要按照约定新增自己的样式表就可以做到。


另外关于JQM转场闪屏的问题,其实可以通过下面的样式修正

.ui-page {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden; /* Chrome and Safari */
	-moz-backface-visibility: hidden; /* Firefox */
}

只需要在页面元素增加背面不可见,来防止动画发生的时候产生的闪屏.我在HTC G17 的真机环境下,没有任何问题.


PS:如果需要更改动画速度,只需要更改下面的-webkit-animation-duration即可

.in, .out {
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 350ms;
}