苏南大叔在本文中来解析一下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)

思路拓展

事实上,在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系列文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

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

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

本站的忠实读者小伙伴,正在阅读下面这些文章: