Question

我正在使用angular-ui-router和angularJS v1.2，并希望实现自定义页面转换如何使用u-view（来自angular-ui-router）而不是ng-view（这将是标准方式）使用ng-animate？有关ng-view的参考，请参阅Remastered Animation in AngularJS 1.2。

编辑：我已经尝试了两个不同版本的角度：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中。

Answer 1

该错误现已关闭，他们已在ui-router 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);
}

Answer 2

看起来这已通过UI路由器0.2.8修复。我正在使用AngularJS v1.2.7。

例如，只需将“幻灯片”类添加到您的ui-view

即可

<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”来解决这个问题。

Answer 3

在周末，我创建了两个用于展示ui-view和ng-view

的视图动画的插图

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

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

angular-ui-router 0.2.8附带修复主要视图动画错误

Answer 4

我刚刚发布了一个tutorial with a working demo，用于在UI路由器上使用ngAnimate（1.4.8）。

它显示了几个不同的视图动画，主视图上的淡入淡出以及嵌套视图上的幻灯片进/出过渡。

这是来自LESS文件的主视图中淡入淡出过渡的片段：

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;
    }
}

Answer 5

避免view的{{1}}名称或该元素的named-views 。

例如，如果这是您的id

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*/
}

祝你好运。

Answer 6

像某人在帖子中说的那样。路由器有一个角度为1.2的分支，它有一些补丁可以使它工作。我知道一个事实，使用Angular 1.2.6 ng-animate 1.2.6和我的特殊ui-router构建的0.2.0 beta分支1.2工作...褪色ui-views ..进出。

问题是你需要“构建”beta分支角度路由器..你不能只从git下载tarball并且它可以运行..你必须下载它。然后建立它。那么你将有一个自定义的ui路由器。在javascript中查看你的ui-router标头。我说这个..

/**
 * 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动画工作......

这是编译的ui-router的pastbin，与1.2一起试用。 BOOM！

0.2.0 Angular-ui-router custom build

Answer 7

如果有人想将animate.css与Angular和UI-Router一起使用，可以在下方执行此操作。请注意，这仅使用Angular 1.2.21和UI-Router 0.2.10进行测试。

使用 FadeInDown 作为输入动画并使用 FadeOutDown 作为退出动画的示例。只需交换animate.css中任何动画的动画名称即可。您可能还希望将其放在div容器中，并将位置设置为relative。

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可视化示例。

Answer 8

使用AngularMotion https://github.com/mgcrea/angular-motion然后将其添加到您的CSS ...

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

将动画添加到ng-view div

的班级（在我的情况下为am-fade）

如何在ui-view而不是ng-view中使用ng-animate？

8 个答案: