html - How to animate my element in my case? -

i want create animation using angular js

i have

html

<ul ng-click="expandmenu =!expandmenu; mycss='expand'">             <li id='unit-btn' ng-class='mycss'>              </li>             <li id='lesson-btn' ng-class='mycss'>              </li>             <li id='day-btn' class='tree-nav-btn'>              </li>   </ul> 

css

.expand{     -webkit-animation: openmenu 5s; }  @-webkit-keyframes openmenu{         {width: 100px;}           {width: 200px;} } 

i able expand li 200px need collapse menu 100px after user clicks again. how accomplish it? help

try classes angular uses ng-show ng-hide directives

when element closing:

.my-element.ng-hide-add { ... } 

when elements opening:

.my-element.ng-hide-remove { ... } 

so can turn that:

.expand.ng-hide-remove {   -webkit-animation: openmenu 5s; }  .expand.ng-hide-add {   -webkit-animation: closemenu 5s; }  @-webkit-keyframes openmenu{     {width: 100px;}       {width: 200px;} }  @-webkit-keyframes closemenu{     {width: 200px;}       {width: 100px;} } 

hope works.