숨김 및 표시 설정에서 작동하지 않는 ng-애니메이트

숨김 및 표시 설정에서 작동하지 않는 ng-애니메이트

앵귤러를 쓰고 있습니다.JS 버전 1.2.11. ng-애니메이트(보여주기 및 숨기기)를 사용하여 전환과 함께 슬라이드 인 및 아웃 할 수 있는 도구 모음을 설정했습니다.

HTML은 다음과 같습니다.

 <div>
  <div class="full-height">
    <menu-main class="full-height pull-left"></menu-main>
    <menu-sub class="full-height pull-left" ng-show="data.active" ng-animate="'animate'">
    </menu-sub>
  </div>
</div>

그리고 여기에 같은 툴바 요소에 대한 CSS가 있습니다.

.animate.fade-hide, .animate..fade-show {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
}
.animate.fade-hide, {
    position: fixed;
    top: 500px;
    opacity: 0.3;
}
.animate.fade-hide, .animate.fade-hide-active 
{
    position: fixed;
    top: 500px;
    opacity: 0.3;
}
.animate.fade-show {
    position: fixed;
    top: 100px;
        opacity: 1;
}
.animate.fade-show, .animate.fade-show-active {
    position: fixed;
    top: 100px;
        opacity: 1;
}

애니메이션이 작동이 안 되고, 제대로 하고 있는지 잘 모르겠습니다.

ng-animate 특성은 1.2에서 더 이상 사용되지 않습니다.대신, 애니메이션은 이제 클래스 기반입니다.

또한 참조하고 있는지 확인합니다.angular-animate.jsngAnimate를 종속 모듈로 추가합니다.

var app = angular.module('myApp', ['ngAnimate']);

그런 다음 애니메이션의 이름(예: '페이드인' 및 '페이드아웃')을 지정하고 각도 설명서에서 확인할 수 있는 특별한 이름 지정 규칙에 따라 추가 클래스로 장식합니다.

이 주제에 대한 또 다른 좋은 자료는 무의 해입니다.

예제에서 페이드:

/* After the transition this will be the only class remaining */
.fadein {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  opacity: 1; /* Default value but added for clarity */
}

/* Initial state when showing */
.fadein.ng-hide-remove {
  opacity: 0;
  display: block !important;
}

/* Will transition towards this state */
.fadein.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}

데모: http://plnkr.co/edit/V9w2EwUh0unszf62TZZB?p=preview

언급URL : https://stackoverflow.com/questions/22814378/ng-animate-not-working-for-a-hide-and-show-setting