No animations when compiling with Angular CLI #1658

Activity

1. owen-m1 commented on Oct 9, 2019

   

   owen-m1

   on Oct 9, 2019

   Last edited by owen-m1

   Member

   More actions

   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?
2. DanielToft commented on Oct 9, 2019

   

   DanielToft

   on Oct 9, 2019

   Author

   More actions

   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)
       }
   }
   
3. DanielToft commented on Oct 9, 2019

   

   DanielToft

   on Oct 9, 2019

   Author

   More actions

   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.
4. owen-m1 commented on Oct 10, 2019

   

   owen-m1

   on Oct 10, 2019

   Member

   More actions

   @DanielToft Does calling that function instead cause the code to stay in the compiled build?
   Also yes I think it would be slower.
5. denisr-w commented on Apr 6, 2020

   

   denisr-w

   on Apr 6, 2020

   More actions

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

   added a commit that references this issue on May 22, 2020

   Not tree-shake repaint function by compressors like terser

   ...

   This issue will close once commit 541e6c3 is merged into the 'master' branch.

   541e6c3
7. owen-m1

   closed this as completedin #1834on May 24, 2020
8. amay077 commented on Jul 31, 2020

   

   amay077

   on Jul 31, 2020

   More actions

   Could you publish to NPM include this PR?
9. Runi-c

   added a commit that references this issue on Nov 10, 2023

   Not tree-shake repaint function by compressors like terser

   ...

   This issue will close once commit a54629e is merged into the 'master' branch.

   a54629e