ng급 지시를 받아 활기찬

ng급 지시를 받아 활기찬

애니메이션 추가 및 제거와 함께 ng-class로 ng-animate를 사용할 수 있습니다.CSS3에서 애니메이션을 하나 만들려고 하는데 ng급 온라인으로 좋은 예시를 찾지 못했습니다.그래서 사람들이 공유하고 싶은 좋은 사례가 있는지 궁금했습니다.

제 최종 애니메이션이 어떻게 나올지는 잘 모르겠지만, 이 예를 위해 수업을 추가할 때 디브의 높이가 점차 높아지도록 하고 싶습니다.myclass.

 <div ng-class="{{myclass:scopeVar}}" ng-animate="?????"></div>

**CSS**

.myclass.ng-add{??}
.myclass.ng-add-active{??}
.myclass.ng-remove{??}
.myclass.ng-remove-active{??}

애니메이팅하기ng-classCSS 전환을 이용한 추가 또는 제거는 3단계가 있습니다.이 단계들의 순서는 매우 중요한데, 저는 수업이 추가되는 순서에 대한 잘못된 이해로 인해 단순 애니메이션이 작동하지 않는 이유를 파악하는데 거의 하루를 보냈습니다.

1단계:

classname-addclassname-add클래스가classname-remove 추가됩니다.

다른 사람이 생각하는 것과 달리 클래스가 요소에 추가되거나 요소에서 제거되기 전에 실제로 추가됩니다.

이 단계에서 우리가 추가해야 할 것은.transition우리 애니메이션의 초기 상태 뿐만 아니라 재산.

2단계:

classname class가 추가되거나 제거됩니다.

여기서 요소의 최종 스타일을 지정할 수 있습니다.이 수업은 종종 우리의 애니메이션과 무관합니다.이 클래스의 추가/제거를 애니메이션으로 만들고 있습니다.이 수업 자체가 주변에서 애니메이션이 일어나고 있다는 것을 인지할 필요도 없습니다.

3단계:

classname-add-activeclassname-add-active클래스가classname-remove-active 추가됩니다.

클래스가 요소에 추가/제거된 후 추가됩니다.

이것은 우리가 우리의 애니메이션의 최종 상태를 명시해야 하는 단계입니다.

---

이를 실제로 보려면 요소의 선택한 상태가 변경될 때 표시되는 고전적인 페이드 인 아웃 애니메이션을 만듭니다.selectedng-class를 사용하여 클래스 변경).

angular.module('demo', ['ngAnimate'])
  .controller('demoCtrl', function($scope) {
    $scope.selected = false;
    $scope.selectToggle = function() {
      $scope.selected = !$scope.selected;
    };
  });

.item {
  width: 50px;
  height: 50px;
  background: grey;
}
.item.selected {
  /* this is the actual change to the elment
   *  which has nothing to do with the animation
   */
  background-color: dodgerblue;
}
.item.selected-add,
.item.selected-remove {
  /* Here we specify the transition property and
   * initial state of the animation, which is hidden 
   * state having 0 opacity
   */
  opacity: 0;
  transition: opacity 3s;
}
.item.selected-add-active,
.item.selected-remove-active {
  /* Here we specify the final state of the animation,
   * which is visible having 1 opacity
   */
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.js"></script>
<div ng-app="demo" ng-controller="demoCtrl">
  <div class="item" ng-class="{selected:selected}"></div>
  <br>
  <br>
  <button ng-click="selectToggle();">
    {{selected? 'Unselect' : 'Select'}}
  </button>
</div>

---

¹ 전환을 토글 중인 클래스에 추가하거나 요소의 정적 선택기에 추가하는 대신 첫 번째 상태에서 지정해야 하는 이유는 무엇입니까?라고 묻습니다.

이것을 설명하기 위해, 단방향 애니메이션이 필요하다고 가정합니다. 예를 들어, 다음과 같은 경우 페이드 아웃 애니메이션이 필요하다고 가정합니다.fade-out클래스가 추가됩니다.

추가하면transition에 있는 재산fade-out클래스 그 자체, 전환은 애니메이션 이후에도 요소에 머무릅니다.즉, 최종 상태(페이드-아웃-애드-액티브)가 제거되면 요소가 천천히 페이드-아웃-페이드-인(fade-out-fade-in) 상태가 됩니다. 그래서 우리는 우리가 원했던 것이 아닙니다.

• 원치않는결과

• 원하는결과

이 문제에 대한 해결책을 찾아냈기 때문에 공유하려고 생각했습니다.

http://jsfiddle.net/nicolasmoise/XaL9r/1/

이것의 좋은 점은 두 개의 CSS 수업만 필요하다는 것입니다. CSS3다를 할 수 .transition기본 클래스에 속성을 입력합니다.다른 ng-애니메이션의 경우와 달리 모든 애니메이션이 CSS3로 되어 있다고 생각합니다(ng-include 등이 포함된 애니메이션처럼 DOM을 건들지 않음).

저는 Ilan Frumer에게 그의 답변에 대한 링크를 감사드리고 싶습니다.그의 해결책은 ng-show가 있는 애니메이션을 위한 것이었는데, ng-show는 매우 비슷하지만 ng-class가 있는 애니메이션과는 조금 다릅니다.그래서 제가 예를 올리기로 결심한 이유입니다.

언급URL : https://stackoverflow.com/questions/21261452/ng-animate-with-ng-class-directive