I'm working on a page with multiple SVG graphics, some of which are going to change location based on tag data from a PLC. To smooth out the relocations I've used the style property "transition : all .3 linear". It works well, looks great, but the problem is it fires every time the page loads and whatever has an x/y position binding crawls all the way across the screen from position (0,0) in a third of a second. Is there a way to keep that animation from showing? Or at least make sure the graphic is in the right position on page load?
not quite. Maybe only apply the transition style after the first position has been initialised
You could try creating a binding on that style property and return the transition settings or 'none' or null or whatever would turn it off in the relevant circumstances.
That's essentially what I ended up doing. My navigation works by changing the link of an embedded view on the main page, so I added a parameter to all the pages to toggle on/off the content of a transition binding and scripted the path property to set that parameter false for half a second every time it changes. Works well, but seems a little less elegant than if there was a way to do that inside the style itself.
1 Like
css does not do a transiiton on the first initial value, but because you are using bindings the first value is coming in slightly delayed. causing the issue.
2 Likes