필자의 경우 요소에 애니메이션을 적용하는 방법은 무엇입니까?

Question

나는 사용하여 애니메이션을 만들려면 각도 JS

나는이 같은

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 나는 200px하지만 난에 리튬을 확장 할 수 있어요

.expand{ 
    -webkit-animation: openMenu 5s; 
} 

@-webkit-keyframes openMenu{ 
     from {width: 100px;} 
     to {width: 200px;} 
} 

사용자가 다시 클릭하면 메뉴를 100px으로 다시 축소해야합니다. 그것을 어떻게 성취합니까? 도움을 주셔서 감사 클래스 NG 쇼 NG 숨기기 지침에 대한 각 용도

하는 요소가 닫는와

Answer 1

시도 :

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

를 요소가 개방 될 때 :

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

그러면 다음과 같이 바뀔 수 있습니다.

.expand.ng-hide-remove { 
    -webkit-animation: openMenu 5s; 
} 

.expand.ng-hide-add { 
    -webkit-animation: closeMenu 5s; 
} 

@-webkit-keyframes openMenu{ 
    from {width: 100px;} 
    to {width: 200px;} 
} 

@-webkit-keyframes closeMenu{ 
    from {width: 200px;} 
    to {width: 100px;} 
} 

희망이 있습니다.