ngAnimate로 아래로/위로 슬라이드?

Question

간단한 슬라이드 완료/업 애니메이션을 추가하고 싶습니다. 예를 들어 Fiddle으로 이동하면 왼쪽 패널에 외부 리소스, Ajax 요청 등을 추가 할 수 있습니다. 그 중 일부를 클릭하면 간단한 애니메이션 슬라이드 다운 효과를 볼 수 있습니다. 내가 성취하려는 것은 조금 비슷합니다. 여기

<button class="checkbox-button btn btn-primary" ng-click="updateActiveTypeBox(true)">{{typeBoxMessage}}</button> 

그리고 내 체크 박스 사업부 :

<div ng-show="activeTypeBox"> 
    <div class="checkbox"> 
     <label> 
      <input type="checkbox" ng-model="selectAll.selected" ng-click="checkAll()" />Check All 
     </label> 
     <label ng-repeat="carType in carTypeObj"> 
      <input type="checkbox" ng-model="carType.selected" /> {{carType.type}} 
     </label> 
    </div> 
</div> 

버튼을 클릭

이 activeTypeBox이 때문에, true에 ng-show="activeTypeBox" 패스를 설정 I는 HTML 버튼이 있습니다. 이 버튼을 다시 클릭하면 activeTypeBox이 false으로 설정되므로 ng-show="activeTypeBox"이 실패합니다. 추가 할 필요가있는 것은 슬라이드 아래/위로 애니메이션입니다. Angular-Animate는 각도 코드와 함께 작동하는 라이브러리이기 때문에 선호합니다. 나는 해결책을 찾으려고했지만, 나의 요구 사항에 맞는 것을 찾지 못했다.

Answer 1

편집 :

:

.animate-show { 
    line-height:20px; 
    opacity:1; 
    padding:10px; 
    border:1px solid black; 
    background:white; 
} 

.animate-show.ng-hide-add.ng-hide-add-active, 
.animate-show.ng-hide-remove.ng-hide-remove-active { 
    -webkit-transition:all linear 0.5s; 
    transition:all linear 0.5s; 
} 

.animate-show.ng-hide { 
    line-height:0; 
    opacity:0; 
    padding:0 10px; 
} 

이

그래서 그냥 사업부

https://docs.angularjs.org/api/ng/directive/ngShow#usage_animations

작업, 예를 들어 class="animate-show"을 추가

은 CSS 함께 할 수있는 것 같은데 http://plnkr.co/edit/xmkBjvPY5OjFLnxcuVKz?p=preview&s=jBzeCEpWphlOpSRv