No animations when compiling with Angular CLI

[DanielToft]

Hi

When compiling SortableJS in production mode with angular CLI, there is no animations. I think, the build-optimizer maybe is removing some code.

I have found an old issue about the same here: https://github.com/SortableJS/ngx-sortablejs/issues/70

I'm using the sortablejs library directly in my angular solution without ngx-sortablejs.

My environment look like this: Angular: 8.2.9 Angular CLI: 8.3.8 sortablejs: 1.10.1

[owen-m1]

There is currently a repaint function in the animation file that may be being removed in your build. Can you check whether or not it is in your compiled code?

[DanielToft]

Hi @owen-m1

I can see that the repaint function is excluded and the call to repaint in the animate function is excluded too.

Here is the compiled animate function

animate: function(l, n, e, t) {
    if (t) {
        Ei(l, "transition", ""),
        Ei(l, "transform", "");
        var i = Di(this.el)
            , o = (n.left - e.left) / (i && i.a || 1)
            , u = (n.top - e.top) / (i && i.d || 1);
        l.animatingX = !!o,
        l.animatingY = !!u,
        Ei(l, "transform", "translate3d(" + o + "px," + u + "px,0)"),

        // repaint function should be here

        Ei(l, "transition", "transform " + t + "ms" + (this.options.easing ? " " + this.options.easing : "")),
        Ei(l, "transform", "translate3d(0,0,0)"),
        "number" == typeof l.animated && clearTimeout(l.animated),
        l.animated = setTimeout(function() {
            Ei(l, "transition", ""),
            Ei(l, "transform", ""),
            l.animated = !1,
            l.animatingX = !1,
            l.animatingY = !1
        }, t)
    }
}

[DanielToft]

I think angulars build optimizer will remove unused properties, because it assumes that it has no side effects.

I assume that you are calling offsetWidth because you want to force a layout reflow? Maybe you can use getClientRects() instead? It should force a reflow too, but i don't know if that method is slower.

[owen-m1]

@DanielToft Does calling that function instead cause the code to stay in the compiled build? Also yes I think it would be slower.

[denisr-w]

Still having issues with that. Animation not working, when --prod flag enabled.

[amay077]

Could you publish to NPM include this PR?