dragend icon indicating copy to clipboard operation
dragend copied to clipboard

improve performance in animation

Open animabear opened this issue 9 years ago • 0 comments

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)";
        }

        ......

      }

animabear avatar Jul 14 '15 06:07 animabear