Question

我遇到了让ngAnimate使用ui-view的主要问题。这些类永远不会被应用。请帮忙：

bower.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",

的index.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));
}

Answer 1

在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”

Answer 2

您需要使用ng-animate属性：

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

请注意双引号内的单引号。这是来自ui-router faq部分的fiddle。

Answer 3

对我来说，实际上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是bower的0.2.8 angular-ui修正，因为0.2.8版本不包含发布文件。

使用ui-view进行ngAnimate

3 个答案: