0

I wish to rotate an icon which is part of an accordion I have written, when a $scope variable in my controller matches the $index of a ng-repeat I apply a class using ng-class to a span I have to rotate it 180 degrees. All works however once the animation of the class 'u-r-180' is complete the span returns to its original position! I don't want this to happen until we remove the 'u-r-180' class when the $scope variable 'selectedType' has a new value (or has changed).

Here is my HTML... nothing to difficult...

<span class="icon-ic_list_arrow_down u-rotate" data-ng-class="{'u-r-180': selectedType === $index}"></span>

'icon-ic_list_arrow_down' is part of a icon font I have in my app and is a arrow pointing downwards.

Here are my CSS classes... 

.u-rotate {
  transition: all 0.75s;
  transform: rotate(0deg);
}

.u-r-180 {
  transform: rotate(180deg) !important;
}

How do I make the span remain in the animated position (rotated 180 degrees) until I remove the class 'u-r-180'?

Here is a very crude JSBIN... notice how the "V" rotates but then returns back to the original positon... https://jsbin.com/qevewe/edit?html,css,js,output

Mike Sav
  • 14,805
  • 31
  • 98
  • 143
  • Can you make a demo so that we can see the problem (or) could you atleast clarify when exactly the `$scope` matches the `$index`? Is it on some action like `hover` etc? – Harry Jan 19 '16 at 14:58
  • In the title you mean? – Mike Sav Jan 19 '16 at 14:59
  • 1
    Okay, I'll amend the title... thanks! – Mike Sav Jan 19 '16 at 15:00
  • Amended! like I say, the transition works, but it returns to its original position, I want to to stay rotated until I remove the class... – Mike Sav Jan 19 '16 at 15:02
  • Yep, I understood that bit but need more information on when the class is added. Is it on any user action (like hover) and if yes, is the hover still on when it goes back to original position? The reason why I am asking this question is because when you use `rotate` transforms, the boundary of the element moves (and sometimes hover is affected like in this question here - http://stackoverflow.com/questions/34118458/css-animation-restarts-if-i-move-the-mouse-when-the-container-retracts-can-you/34118756#34118756) – Harry Jan 19 '16 at 15:03
  • JSBin added: https://jsbin.com/qevewe/edit?html,css,js,output – Mike Sav Jan 19 '16 at 15:17
  • 1
    Ok, now your problem is more clear. The issue is because `span` is an inline element by default and rotate transforms are applicable only for block level elements. You need to add `display: inline-block` to the element. – Harry Jan 19 '16 at 15:24

0 Answers0