我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

苏南大叔在本文中来解析一下weui官方的转场动画效果,这个效果并不是weui框架自带的,而是weui官方范例里面的效果。这个界面切换效果,对于大多数程序猿的网页类app来说,还是比较有用的。所以,在这里,苏南大叔把这个效果单独拿出来说说。分析代码之后,您就会发现代码其实非常简单。

苏南大叔:weui官方范例解析:转场动画实现原理 - weui-fadein-fadeout
weui官方范例解析:转场动画实现原理(图4-1)

本文测试环境:mac/weui@1.1.3

官方范例

本文的中的效果,指的是主界面从右到左的切换效果。大家可以查看在线的weui范例:

苏南大叔:weui官方范例解析:转场动画实现原理 - weui-offical
weui官方范例解析:转场动画实现原理(图4-2)

大家可以直接ctrl+u查看源码即可,涉及到的文件是:

苏南大叔:weui官方范例解析:转场动画实现原理 - weui-eg-source
weui官方范例解析:转场动画实现原理(图4-3)

代码解析

这个效果的核心关键词是slideIn,具体上来说,是个classNameslideIn定义在example.css之中,涉及到的代码是这样的:

css:

@-webkit-keyframes a {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes a {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
        opacity: 0
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

.slideIn {
    -webkit-animation: a .2s forwards;
    animation: a .2s forwards
}

苏南大叔:weui官方范例解析:转场动画实现原理 - weui-source-css
weui官方范例解析:转场动画实现原理(图4-4)

原版js:

var html = $(config.template).html();
var $html = $(html).addClass('slideIn').addClass(config.name);
$html.on('animationend webkitAnimationEnd', function(){
   $html.removeClass('slideIn').addClass('js_show');
});
this.$container.append($html);

这个原版的js并不是通用的,因为有上下文环境。这里,苏南大叔稍稍解释一下其原理:css先定义了一个动画slideIn,然后把slideIn设置为目标divclass,目标div应用css3动画,从右移动到左边。在动画之前,通过js监控了两个事件,分别是:animationendwebkitAnimationEnd。当动画结束的时候,将开端定义好的slideIn类名删除掉。

思路拓展

事实上,在weui官方范例里面,除了slideIn,还有个slideOut,两者效果是相反的。slideOut负责的效果是div的消失。

css:

@-webkit-keyframes b {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        opacity: 0
    }
}

@keyframes b {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        opacity: 0
    }
}

.slideOut {
    -webkit-animation: b .2s forwards;
    animation: b .2s forwards
}

js:

stack.dom.addClass('slideOut').on('animationend webkitAnimationEnd', function () {
  stack.dom.remove();
});

这个slideOut的原理,大家自行脑补吧,挺简单的。或者可以根据苏南大叔描述的slideIn效果,反推出slideOut的效果原理即可。

总结

本文重点描述的是weui官方demo中的转场动画的实现原理,其css效果和js原理,可以应用到其它的页面中。欢迎大家支持苏南大叔的weui系列文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   weui