前言
最近产品有个需求,要做个tab标签切换,这最基本的样式当然不在话下,但作为极客的我总要与众不同吧!于是大开脑洞,也就想出了个tab切换时候加个滑动动画(表笑我,谁让咱没达到UI交互设计师的高度呢),再然后正好想起本站曾经有个效果(传送门),于是乎找了这个效果demo给产品看,产品欣然同意了。
详细内容请参见原文:http://www.gbtags.com/gb/share/5781.htm
那么,问题又来了,之前的这个效果有几个弊端,也是我和产品认为不好的:
不同tab页的内容高度不同,差距可能还比较大,不能用一个统一的固定高度来搞
例如从tab1跳到tab3这种跨项的情况,原则上是不能让用户在动画过程中看到tab2内容的(不要问为什么,这就是极客精神),如果从tab1跳到tab5,中间跨了3项,这体验总感觉略low啊
因此,轮子还得造!
需求功能
不固定高度。高度不同的tab页直接也可以自适应切换
跨项无缝切换。跨项切换时候不会看到中间项内容
tab标题也增加滑动动画
思路分析
所谓不固定高度,那么只有在即将动画时拿到切换前和切换后两个tab页中较大的高度进行设置
跨项不显示中间项的话,那么只有“造假”了:把切换前和切换后的两个tab页克隆下来构造个动画区,放到最前面,走个过场动画,同时隐藏掉原来真实tab页,结束后remove掉动画区,同时将真实tab页展现(本人觉得这是个简单的笨办法,如果大神有更合适的思路可以留言讨论)
代码赏析
以下是jquery插件的原代码,注释可以说的手把手的教学!每一步都写了注释,重点就是看“tab页动画部分”的注释
$.fn.extend({
tab: function (index) {//index:初始化后第几个tab显示,默认0
详细内容请参见原文:http://www.gbtags.com/gb/share/5781.htm