36

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

编辑：我尝试了两种不同版本的 angular：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。

4

8 回答 8

35

该错误现已关闭，他们在 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);
}
于 2014-01-21T18:19:59.447 回答
7

看起来这已通过 UI Router 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，一些动画似乎有一些奇怪的行为。我通过将 autoscroll="false" 添加到我的 ui-view 元素来解决它。

于 2014-01-17T19:15:13.650 回答
3

上周末，我创建了两个 plunk 演示了两者的视图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修复了主要的视图动画错误

于 2014-02-08T19:04:17.220 回答
3

我刚刚发布了一个带有工作演示的教程，用于将 ngAnimate (1.4.8) 与 UI 路由器一起使用。

它显示了几个不同的视图动画，主视图上的淡入过渡和嵌套视图上的滑入/滑出过渡。

下面是 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;
    }
}
于 2016-01-21T00:03:56.313 回答
2

避免使用该元素的view名称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*/
}

尝试：

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

祝你好运。

于 2016-06-28T06:04:40.857 回答
1

就像有人在帖子里说的那样。路由器有一个 Angular 1.2 分支，其中包含使其工作的补丁。我知道一个事实，即使用 Angular 1.2.6 ng-animate 1.2.6 和我的 0.2.0 beta 分支 1.2 的特殊 ui-router 构建工作......淡入淡出 ui-views.. 进出。

问题是您需要“构建” beta 分支角度路由器..您不能只是从 git 下载一个 tarball 并且它可以工作..您必须下载它。然后构建它。那么您将拥有一个自定义的 ui-router。在 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 尝试一下。繁荣！

0.2.0 Angular-ui-router 自定义构建

于 2013-12-30T18:42:06.973 回答
1

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

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

将您的动画添加到am-fade您的 ng-view div 的类（在我的情况下）

于 2014-10-02T00:36:00.483 回答
1

如果有人想将animate.css与Angular和UI-Router一起使用，可以在下面简单地执行此操作。请注意，这仅使用 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 可视化示例。

于 2014-08-28T07:23:26.593 回答