Onclick rotation animation

General Discussion
,
1

Hi,
I have an icon for which I have added below styles.

{
  "animation": "ia_symbolComponent__animate--rotate linear infinite",
  "animation-duration": "1000ms"
}

I want that when I click on the Icon it should rotate once and stop, with above script and not having much knowledge about CSS I am not able to find a solution.

Thanks

2

Any inputs will be appreciated.

3

This topic has been discussed before.

https://forum.inductiveautomation.com/search?q=Icon%20rotation%20

1 Like
4

Yes I read and but it is for continuous rotation, I want it to rotate only once

5

Remove infinite.

6

I had removed infinite and put animation-iteration-count = 1
doesn't help

7

You will want to put the animation in a class in your sytlesheet.css file. Right click Styles to add it in your project.

Animations start when the view is loaded or you can toggle animation-play-state between "paused" and "running" (this really only works with infinite loops).

What you want to do is have two different classes with animations and switch between the two classes with a binding or script. The browser will see the change in the CSS and start the new animation. Look into keyframes as well.

1 Like
8

It helps and I made progress with it.
Could you guide little more on how I can make the animation complete 1 rotation and paused.

9

with ia_symbolComponent__animate--rotate linear forwards it is rotating once,
When I click on the Icon it should rotate once, but that is not working.

10

Here's a class example called spin that should work. Toggle your class of your components between this and None or another class without the animation in it.

.spin {
  "animation": "ia_symbolComponent__animate--rotate linear 1",
  "animation-duration": "1000ms"
}

These post should help as well.

2 Likes
11

Can you try the below script once and tell me accordingly?


{
    animation: rotate-once 1000ms linear;
    animation-fill-mode: forwards;
}

@keyframes rotate-once {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Thanks

1 Like