angular ngClass 애니메이션 후크

클래스 추가/제거시 애니메이션을 재생해야합니다. 내가 지금까지 가지고있는 해결책은 2 개의 클래스로 장황한 접근 방법을 사용하는 것으로 추악하게 보인다. 좀 더 우아하고 깨끗한 코드를 작성하게되어 기쁩니다.angular ngClass 애니메이션 후크

예 : http://plnkr.co/edit/wvrfP3lIbRmBeSdi99xO?p=preview

HTML :

<body ng-app="ngAnimate"> 
    <input id="setbtn" type="button" value="set" ng-click="myVar=true"> 
<input id="clearbtn" type="button" value="clear" ng-click="myVar=false"> 
<br> 
<span class="base-class" ng-class="{'my-class1': myVar, 'my-class2': !myVar }">Sample Text</span> 
</body>

CSS :

적절한 용액 ngClass 지시자 명백한 애니메이션 후크 아니었다

.base-class { 
    cursor: default; 
    display: block; 
    background: #dc5d63; 
    width: 100%; 
    left: 0; 
    right: 0; 
    top: 0; 
    position: relative; 
    height: 77px; 
    font-family: Cala-Bold, serif; 
    float: left; 
} 
.base-class.my-class1, 
.base-class.my-class2 { 
    -moz-animation: 1s slidein ease-out; 
    -webkit-animation: 1s slidein ease-out; 
    animation: 1s slidein ease-out; 
} 
@-webkit-keyframes slidein { 
    from { 
    margin-top: -100%; 
    } 
    to { 
    margin-top: 0%; 
    } 
} 

@-moz-keyframes slidein { 
    from { 
    margin-top: -100%; 
    } 
    to { 
    margin-top: 0%; 
    } 
} 

@keyframes slidein { 
    from { 
    margin-top: -100%; 
    } 
    to { 
    margin-top: 0%; 
    } 
}

출처

2015-01-06 Yevgen Safronov

: https://code.angularjs.org/1.2.28/docs/guide/animations (클래스 ngClass 애니메이션 후크 부)

working exa mple : http://plnkr.co/edit/fMaALtiR8dxR8QkAoH6E?p=preview

HTML :

<body ng-app="ngAnimate"> 
    <input id="setbtn" type="button" value="set" ng-click="myVar=true"> 
<input id="clearbtn" type="button" value="clear" ng-click="myVar=false"> 
<br> 
<span class="base-class" ng-class="{'my-class': myVar }">Sample Text</span> 
</body>

CSS :

.base-class { 
    cursor: default; 
    display: block; 
    background: #dc5d63; 
    width: 100%; 
    left: 0; 
    right: 0; 
    top: 0; 
    position: relative; 
    height: 77px; 
    font-family: Cala-Bold, serif; 
    float: left; 
} 
.base-class.my-class-add, 
.base-class.my-class-remove { 
    -moz-animation: 1s slidein ease-out; 
    -webkit-animation: 1s slidein ease-out; 
    animation: 1s slidein ease-out; 
} 
@-webkit-keyframes slidein { 
    from { 
    margin-top: -100%; 
    } 
    to { 
    margin-top: 0%; 
    } 
} 

@-moz-keyframes slidein { 
    from { 
    margin-top: -100%; 
    } 
    to { 
    margin-top: 0%; 
    } 
} 

@keyframes slidein { 
    from { 
    margin-top: -100%; 
    } 
    to { 
    margin-top: 0%; 
    }

}

출처

2015-01-06 15:18:07

angular ngClass 애니메이션 후크

답변

관련 문제