2

我在让 ngAnimate 与 ui-view 一起工作时遇到了重大问题。这些课程永远不会被应用。请帮忙：

鲍尔.json

"angular": "1.2.0-rc.2",
"angular-resource": "1.2.0-rc.2",
"angular-ui-router": "0.2.5",
"angular-ui-utils": "~0.0.4",
"angular-animate": "1.2.4",

索引.html

<body ng-app="ivy" ng-controller="transitionCtrl">
    <section ui-view></section>
</body>

控制器

angular.module('ivy.transition.controllers.transitionCtrl', ['ngAnimate', 'ui.router'])

.controller('transitionCtrl', ['$scope', function ($scope) {
  $scope.$on('$stateChangeSuccess', function (event, toState) {
    console.log('transitioning to ', event, toState);
  });
}]);

SASS

.ng-enter,
.ng-leave {
  @include vendor(transition, all 5s ease-out);
}

.ng-leave {
  @include vendor(transform, translate3d(100%,0,0));
}

.ng-enter {
  @include vendor(transform, translate3d(-100%,0,0));
}
4

3 回答 3

3

在index.html刚刚添加的class='my-css-animation'旁边ui-view，例如：

    <section ui-view class='my-css-animation'></section>

另外，angular-animate应该与您的angular版本号匹配。angular.js "1.2.4" 与 angular-animate.js "1.2.4" 一起使用

于 2013-12-12T02:09:54.190 回答
0

您需要我们的 ng-animate 属性：

<div ui-view ng-animate="'slideanim'">

注意双引号内的单引号。这是来自 ui-router 常见问题解答部分的小提琴。

于 2013-12-12T23:57:53.453 回答
0

对我来说，实际上 ui-view 仅在将 angular-ui-router 更新到 0.2.8 后才开始制作动画，并且我遵循了 angular-ui FAQ链接到plunkr的现有示例。

我的凉亭配置：

"dependencies": {
    "angular": "~1.2",
    "angular-ui": "~0.4",
    "angular-ui-router": "0.2.8-bowratic-tedium",
    "angular-animate": "~1.2",
    ....
}, ...

这0.2.8-bowratic-tedium是0.2.8bower 的 angular-ui 修复，因为0.2.8版本不包含发布文件。

于 2014-02-18T23:06:56.990 回答