weui官方范例解析：转场动画实现原理

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

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

本文测试环境：mac/weui@1.1.3。

官方范例

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

• https://weui.io/

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

• https://weui.io/example.css
• https://weui.io/example.js

代码解析

这个效果的核心关键词是slideIn，具体上来说，是个className。slideIn定义在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
}

原版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设置为目标div的class，目标div应用css3动画，从右移动到左边。在动画之前，通过js监控了两个事件，分别是：animationend和webkitAnimationEnd。当动画结束的时候，将开端定义好的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系列文章：

• https://newsn.net/tag/weui/

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