Vue: SVG Element can't dynamic animate.

[shockw4ver]

Version

2.5.3

Reproduction link

https://codepen.io/shockw4ver/pen/Nwjowa

Steps to reproduce

Enter the page, the animate will be triggered once, CLICK SVG, change the value of isOpen to switch between two , however nothing happend, svg just keeps its state changed from the page entering.

What is expected?

svg should transform when data(isOpen) change.

What is actually happening?

only transform once at entering the page.

---

If I got a wrong way when using ?
Or there's some difference to use svg element?

[indus]

animateTransform is crap. I think you would be better off trying to use CSS transforms when you want dynamic animations.

[yyx990803]

I don't think the repro clearly demonstrates that the problem is related to Vue or not, because it involves potential problems in the way you use SVG. Please provide a repro with your intended animation working in plain SVG so that we know this is actually a Vue issue.

/cc @sdras

[sdras]

Hey there and welcome!

This problem isn't with Vue or the SVG, but rather the logic. You're asking it to fire if the condition of isOpen returns true, which it does on initial page visit.

I'm sorry to say, but as a side note I don't suggest you continue using SMIL's <animateTransform>.Chrome is pausing deprecation for the moment, but it's on the chopping block. Microsoft says they will never ever support it for IE/Edge browsers.

For better support, I highly recommend using GreenSock's TweenMax- you'll eventually run into cross browser inconsistencies on these transform origins otherwise. You can check this demo, a fork of yours, for an example:
https://codepen.io/sdras/pen/c2483edf1630550c2e70f4fd39a67b19?editors=1010

I threw it together from yours pretty quickly, so you'd probably need some tweaks here and there. Let me know if you have further questions!

[yyx990803]

Thanks for the explanation Sarah.

[ghenry]

I've just hit this myself trying to use https://codepen.io/ghenry/pen/LrGwgW in a Spinner component. Will look at GreenSock too.