Stereobit / dragend

dragend JS – a touch ready, full responsive, content swipe script
http://stereobit.github.com/dragend/
MIT License
486 stars 113 forks source link

improve performance in animation #72

Open animabear opened 9 years ago

animabear commented 9 years ago

The dragend use 2D Transforms to animate pages for compatibility, we can add 3d judgement to improve performance.

    function has3d() {
        if (!window.getComputedStyle) {
            return false;
        }

        var el = document.createElement('p'), 
            has3d,
            transforms = {
                'webkitTransform':'-webkit-transform',
                'OTransform':'-o-transform',
                'msTransform':'-ms-transform',
                'MozTransform':'-moz-transform',
                'transform':'transform'
            };

        // Add it to the body to get the computed style.
        document.body.insertBefore(el, null);

        for (var t in transforms) {
            if (el.style[t] !== undefined) {
                el.style[t] = "translate3d(1px,1px,1px)";
                has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
            }
        }

        document.body.removeChild(el);

        return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
    }

    _scrollWithTransform: function ( coordinates ) {
        if (has3d()) {
          var style = this.settings.direction === "horizontal" ? 
              "translate3d(" + coordinates.x + "px, 0, 0)" :
              "translate3d(0, " + coordinates.y + "px, 0)";

        } else {
          var style = this.settings.direction === "horizontal" ? 
              "translateX(" + coordinates.x + "px)" : 
              "translateY(" + coordinates.y + "px)";
        }

        ......

      }