어떻게 하면 ng-view가 아닌 ui-view에서 ng-animate를 사용할 수 있나요?

어떻게 하면 ng-view가 아닌 ui-view에서 ng-animate를 사용할 수 있나요?

각이 있는 angular-ui-router를 사용하고 있습니다.JS v1.2로 커스텀 페이지 전환을 구현하려고 합니다.
ng-view(표준적인 방법)가 아닌 ui-view(angular-ui-router에서)를 사용하여 ng-animate를 사용하려면 어떻게 해야 합니까?ng-view에 대한 참조는 AngularJS 1.2의 Remastered Animation을 참조하십시오.

편집: 댓글에 제시된 바와 같이 두 가지 버전의 각도(v1.2.0-rc.2와 v1.2.0-rc.3)를 사용해 보았습니다만, 어느 쪽도 효과가 없는 것 같습니다.제가 뭔가 잘못하고 있는 것 같아요.

HTML은 다음과 같습니다.

<div ui-view class="slide"></div>

및 CSS:

.slide {
    width:1024px;
    height:768px;
}
.slide.ng-enter,
.slide.ng-leave {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    border: 1px solid blue;
}

.slide.ng-enter.ng-enter-active {
    border: 1px solid red;
}

앞서 말한 예의 JSfiddle을 추가했습니다.이 예를 ng-view와 ui-view로 확대하면 좋겠지만, ng/ui-view와 파셜을 JSfiddle로 가져오는 방법은 잘 모르겠습니다.

이제 버그가 닫히고 UI 라우터 Wiki에 항목이 추가되었습니다.데모 Plunkr도 포함되어 있습니다.URL이 오래될 경우를 대비해서 여기에 코드 예를 복사해 두겠습니다.

HTML:

<div class="row">
   <div class="span12 ui-view-container">
      <div class="well" ui-view></div>        
   </div>
</div> 

CSS:

/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/
.well[ui-view]{
 height: 65px; 
}

.ui-view-container {
  position: relative;
}

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

[ui-view].ng-enter {
  opacity: 0;
  -webkit-transform:scale3d(0.5, 0.5, 0.5);
  -moz-transform:scale3d(0.5, 0.5, 0.5);
  transform:scale3d(0.5, 0.5, 0.5);
}

[ui-view].ng-enter-active {
  opacity: 1;
  -webkit-transform:scale3d(1, 1, 1);
  -moz-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1);
}

[ui-view].ng-leave {
  opacity: 1; 
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
}

[ui-view].ng-leave-active {
  opacity: 0;
  -webkit-transform:translate3d(100px, 0, 0);
  -moz-transform:translate3d(100px, 0, 0);
  transform:translate3d(100px, 0, 0);
}

UI Router 0.2.8에서 이 문제가 해결된 것 같습니다.Angular를 사용하고 있습니다.JS v1.2.7

예를 들어 UI 보기에 "슬라이드" 클래스를 추가합니다.

<div ui-view class="slide">

애니메이션에는 다음 css를 사용합니다.

.slide {
    -webkit-transition: -webkit-transform .7s ease-in-out;
    -moz-transition: -moz-transform .7s ease-in-out;
    -o-transition: -o-transform .7s ease-in-out;
    transition: transform .7s ease-in-out;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide.ng-enter {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.slide.ng-enter.ng-enter-active, .slide.ng-leave {
    position: absolute;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide.ng-leave.ng-leave-active {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

또한 $uiViewScroll로 인해 일부 애니메이션이 이상한 동작을 하는 것 같습니다.ui-view 요소에 autoscroll="false"를 추가하여 대처했습니다.

지난 주말, 저는 두 가지 모두를 위한 뷰 애니메이션을 시연하는 두 개의 플런크를 만들었습니다.ui-view그리고.ng-view

ui-view: http://plnkr.co/edit/jpebBk?p=preview

ng-view: http://plnkr.co/edit/LQhVYU?p=preview

angular-ui-module 0.2.8은 주요 애니메이션 버그에 대한 수정과 함께 제공되었습니다.

UI Router에서 ngAnimate (1.4.8)를 사용하기 위한 작업 데모와 함께 튜토리얼을 올렸습니다.

여기에는 몇 가지 다른 보기 애니메이션, 기본 보기에서의 전환 페이드 및 중첩된 보기에서의 슬라이드 인/아웃 전환이 표시됩니다.

메인 뷰의 페이드 인 트랜지션에 관한 LES 파일의 일부를 다음에 나타냅니다.

main {
    /* start 'enter' transition */
    &.ng-enter {
        /* transition on enter for .5s */
        transition: .5s;

        /* start with opacity 0 (invisible) */
        opacity: 0;
    }

    /* end 'enter' transition */
    &.ng-enter-active {
        /* end with opacity 1 (fade in) */
        opacity: 1;
    }
}

또는 그 요소의 이름은 사용하지 마십시오.

예를 들어, 이 경우html

<div id="home-page" ui-view="home">
  <!-- THIS IS WHERE YOUR TEMPLATE WILL BE LOADED -->
</div>

대신:

/*AVOID*/
div#home-page[ui-view="home"].ng-enter {
    /*ENTER STYLES*/
}
div#home-page[ui-view="home"].ng-enter-active {
    /*...ENTER-ACTIVE-STYLES*/
}

시험:

div[ui-view].ng-enter {
    /*...ENTER-STYLES*/
}
div[ui-view].ng-enter-active {
    /*...ENTER-ACTIVE-STYLES*/
}

행운을 빌어요.

누군가가 게시물에 말한 것처럼.라우터에는 동작시키는 패치가 있는 1.2개의 각형 브랜치가 있습니다.Angular 1.2.6 ng-animate 1.2.6과 특별한 ui-router 빌드 0.2.0 베타 브랜치 1.2를 사용하면...페이딩 UI 주소..안팎으로.

문제는 베타 브랜치 앵귤러 라우터를 "구축"해야 한다는 것입니다.그냥 git에서 타볼을 다운받아서 작동시킬 순 없어다운로드 후 빌드하면 커스텀 UI 라우터를 사용할 수 있습니다.javascript에 있는 당신의 ui-discript 헤더를 보세요. 제 말은..

/**
 * State-based routing for AngularJS
 * @version v0.2.0-dev-2013-10-05
 * @link http://angular-ui.github.com/
 * @license MIT License, http://www.opensource.org/licenses/MIT
 */

버전 0.2.0-dev-2013-10-05라고 표시되어 있습니까?그 날짜는 내가 내 것을 컴파일한 날짜야.그러니 데이트 상대와 관련이 있을 거야javascript 헤더에 없는 경우 마스터와 동일한 0.2.0 버전을 사용하고 있으며 1.2 애니메이션을 작동시키기 위해 특별한 것을 사용하고 있지 않습니다.

이것은 1.2와 함께 사용할 수 있는 컴파일된 UI 드라이버의 pastbin입니다.쾅!

0.2.0 Angular-ui-router 커스텀 빌드

Angular 및 UI-Router와 함께 animate.css를 사용하고 싶은 사람은 아래를 참조하십시오.이 테스트는 Angular 1.2.21 및 UI-Router 0.2.10을 사용하여만 수행되었습니다.

애니메이션 입력으로 FadeInDown을 사용하고 종료 애니메이션으로 FadeOutDown을 사용하는 예.애니메이션 이름을 animate.css에서 애니메이션 이름과 바꾸기만 하면 됩니다.위치를 상대값으로 설정한 상태에서 이 값을 div 용기에 넣을 수도 있습니다.

HTML:

<div data-ui-view class="fade"></div>

CSS:

.fade.ng-enter, .fade.ng-leave {
    position: absolute;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.fade.ng-enter {
   -webkit-animation-name: fadeInDown;
   animation-name: fadeInDown;
}

.fade.ng-leave {
   -webkit-animation-name: fadeOutDown;
   animation-name: fadeOutDown;
}

대신 bounceInDown 및 bounceOutDown을 사용하는 다른 예:

HTML:

<div data-ui-view class="bounce"></div>

CSS:

.bounce.ng-enter, .bounce.ng-leave {
    position: absolute;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.bounce.ng-enter {
   -webkit-animation-name: bounceInDown;
   animation-name: bounceInDown;
}

.bounce.ng-leave {
   -webkit-animation-name: bounceOutDown;
   animation-name: bounceOutDown;
}

편집: @kamweti의 Plunker 포크를 만들어 animate.css의 예를 시각화합니다.

AngularMotion https://github.com/mgcrea/angular-motion을 사용하여 이것을 css에 추가합니다.

div[ng-view].ng-leave-active {
    display: none !important;
}

합니다(★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」am-fadeng뷰의 div)를 표시합니다.

언급URL : https://stackoverflow.com/questions/19514445/how-can-i-use-ng-animate-with-ui-view-rather-than-ng-view