CFXIXI工作室首页
CF西西的博客 | 写一个css3页面切换的动画函数

写一个css3页面切换的动画函数

26. 十二月 2014

 

movePageHover:function(start, end, anim, callback, _this){
            //获得页码数判断切换层级
            var startPid = start.attr("pid") || start.attr("bid");
            var endPid = end.attr("pid") || end.attr("bid");

            //ab为-1,从右到左划。其他则从左到右划
            var ab = catchId(startPid,endPid);

            //定义动画结束时执行的事件
            start.css({"display": "block", "zIndex": "1", "opacity": "1"}).off("webkitAnimationEnd").on("webkitAnimationEnd", function(){
                start.removeAttr("style");
                start.css("display", "none");
            });

            end.css({"display": "block", "zIndex": "2", "opacity": "1"}).off("webkitAnimationEnd").on("webkitAnimationEnd", function(){
                end.removeAttr("style");
                end.css("display", "block");
            });

            //开始定义动画
            var moveAnaFrames = $("#_moveAnaFrames_");
            if (moveAnaFrames != null) {
                moveAnaFrames.remove();
            }

            var _styleCss = "<style id='_moveAnaFrames_'>";

            var runTime = 0.3;
            var ease = "ease-out";

            switch (anim){
                case "move":
                    if (ab != -1) {
                        _styleCss += "@-webkit-keyframes pageAnimateRunCurrent { from {-webkit-transform: translate3d(0px, 0px, 0px);} to {-webkit-transform: translate3d(-100%, 0px, 0px);} }";
                        _styleCss += "@-webkit-keyframes pageAnimateRunTarget { from {-webkit-transform: translate3d(100%, 0px, 0px);} to {-webkit-transform: translate3d(0px, 0px, 0px);} }";
                    } else {
                        _styleCss += "@-webkit-keyframes pageAnimateRunCurrent { from {-webkit-transform: translate3d(0px, 0px, 0px);} to {-webkit-transform: translate3d(100%, 0px, 0px);} }";
                        _styleCss += "@-webkit-keyframes pageAnimateRunTarget { from {-webkit-transform: translate3d(-100%, 0px, 0px);} to {-webkit-transform: translate3d(0px, 0px, 0px);} }";
                    }
                    break;
            }



            _styleCss += "</style>";
            $("head").append(_styleCss);

            //开始执行滑动动画
            start.css("-webkit-animation", "pageAnimateRunCurrent " + runTime + "s " + ease);
            end.css("-webkit-animation", "pageAnimateRunTarget " + runTime + "s " + ease);

            //start.css("display", "none");
            //end.css("display", "block");

            if(callback instanceof Function)
                callback();

            return false;
        },

Html5