继承Jquery的方法--tab滑动动画切换
1
前言
最近产品有个需求，要做个tab标签切换，这最基本的样式当然不在话下，但作为极客的我总要与众不同吧！于是大开脑洞，也就想出了个tab切换时候加个滑动动画（表笑我，谁让咱没达到UI交互设计师的高度呢），再然后正好想起本站曾经有个效果（传送门），于是乎找了这个效果demo给产品看，产品欣然同意了。
那么，问题又来了，之前的这个效果有几个弊端，也是我和产品认为不好的：
- 不同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
- this.each(function () {
- var animating = false;//动画进行中的标识，保证不会在动画过程中再次执行动画
- var $this = $(this);
- var $tabCard = $this.children(".tab-card");
- var $tabCards = $tabCard.children();
- var $tabPaper = $this.children(".tab-paper");
- var $tabPapers = $tabPaper.children();
- var curIndex = $tabCards.filter(".cur").index();//通过cur获取当前tab页序号
- curIndex = index || (curIndex == -1 ? 0 : curIndex) || 0;//参数index优先级最高
- //初始化cur状态
- $tabCards.removeClass("cur");
- $tabPapers.removeClass("cur");
- $tabCards.eq(curIndex).addClass("cur");
- $tabPapers.eq(curIndex).addClass("cur");
- /*************************tab标签的动画部分*************************/
- /*此段代码借鉴lavaLamp，构造一个绝对定位的back li在滑动*/
- $tabCard.each(function () {
- var b = $(this), noop = function () {
- }, $back = $('<li class="back"><div class="left"></div></li>').appendTo(b), $li = $("li", this), curr = $("li.cur", this)[0] || $($li[0]).addClass("cur")[0];
- $li.not(".back").hover(function () {
- move(this)
- }, noop);
- $(this).hover(noop, function () {
- move(curr)
- });
- $li.not(".back").click(function (e) {
- if (!animating) {
- setCurr(this);
- }
- });
- setCurr(curr);
- function setCurr(a) {
- $back.css({"left": a.offsetLeft + "px", "width": a.offsetWidth + "px"});
- curr = a
- }
- function move(a) {
- $back.each(function () {
- $(this).dequeue()
- }).animate({width: a.offsetWidth, left: a.offsetLeft}, 500, "easeOutBack");
- }
- });
- /*************************tab页动画部分*************************/
- /*tab标签点击*/
- $tabCards.on("click", function () {
- slide(this)
- });
- /*直接更改当前tab标签样式*/
- function changeCard(the) {
- var $t = $(the);
- $t.addClass("cur").siblings().removeClass("cur");
- }
- /*直接切换tab页内容位置*/
- function changePaper(the) {
- var $t = $(the);
- var ci = $t.index();
- $tabPapers.eq(ci).addClass("cur").siblings().removeClass("cur");
- curIndex = ci;
- $tabPaper.height($tabPapers.eq(ci).height());
- }
- /*tab页滑动动画*/
- function slide(the) {
- if (!animating) {
- var $t = $(the);
- changeCard(the);
- var ci = $t.index();
- // 当前页和切换页相同时 直接返回
- if (ci == curIndex) return;
- var $fromPaper = $tabPapers.eq(curIndex);
- var $toPaper = $tabPapers.eq(ci);
- //克隆一个当前页和一个切换页，后续只做动画使用
- var $fromPaper_clone = $fromPaper.clone();
- var $toPaper_clone = $toPaper.clone();
- //获取tab页宽度，padding样式
- var paperWidth = $tabPaper.width();
- var paperPadding = $tabPaper.css("padding");
- var paperPaddingLeft = parseInt($tabPaper.css("padding-left"));
- //通过宽度和padding计算总宽度
- var paperWidthTotal = paperWidth + 2 * paperPaddingLeft;
- //比较当前页和切换页的高度，选取高的作为动画时的高度
- var paperHeight = Math.max($fromPaper.height(), $toPaper.height());
- //定义动画区样式
- $fromPaper_clone.css({
- float: "left",
- display: "block",
- background: "#fff",
- padding: paperPadding,
- width: paperWidth,
- height: $fromPaper.height()
- });
- $toPaper_clone.css({
- float: "left",
- "display": "block",
- background: "#fff",
- padding: paperPadding,
- "width": paperWidth,
- height: $toPaper.height()
- });
- //定义动画区，此动画区只作动画使用，动画完成后立刻remove
- var $animateArea = $("<div></div>");
- $animateArea.css({
- "position": "absolute",
- "top": 0,
- left: 0,
- width: 2 * paperWidthTotal,
- height: paperHeight
- });
- //定义动画到达的位置，比较切换页和当前页序号大小，以此决定动画是向前滑动还是向后滑动
- var animateLeft;
- if (ci > curIndex) {
- $animateArea.css("left", 0).append($fromPaper_clone).append($toPaper_clone);
- animateLeft = -paperWidthTotal;
- } else if (ci < curIndex) {
- $animateArea.css("left", -paperWidthTotal).append($toPaper_clone).append($fromPaper_clone);
- animateLeft = 0;
- }
- //动画区被加载，同时tab页高度改变，真实tab透明隐藏
- $tabPaper.append($animateArea);
- $tabPaper.height(paperHeight);
- $tabPapers.css({"opacity": 0, filter: "alpha(opacity=0)"});
- //执行动画，动画结束后remove掉动画区，直接定位并显示出真实tab页内容
- animating = true;
- $animateArea.animate({left: animateLeft}, 500, "easeOutQuint", function () {
- $animateArea.remove();
- changePaper(the);
- $tabPapers.css({"opacity": 1, filter: "alpha(opacity=100)"});
- animating = false;
- });
- }
- }
- });
- }
- });
效果预览~~
在线代码调试：地址
kvhur
9年前提问
