Question

我尝试在AngularJS中为ng-view div的更改设置动画。

所以我的index.html文件中的div看起来像是：

<div ng-view></div>

我有另一个html文件（view1.html），里面只有div。

我的app.js路由如下：

app.config(function($routeProvider) {
$routeProvider
    .when('/sites/:templateID',
    {
        controller: 'simpleController',
        templateUrl:'templates/question.html'
    })
});

我正在点击按钮更改路径，并调用：

$location.path("/sites/" + nextID);

网站的网址更改，只有ng-view-div才会更新。但是，当我将ng动画应用于它时：

<div class="content" data-ng-view ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"></div>

它不起作用。我包括AngularJS 1.2.5，我的index.html中的animate-js文件以及我的CSS：

.animate-enter, .animate-leave {
  -webkit-transition:all 2s ease;
  -moz-transition:all 2s ease;
  -o-transition:all 2s ease;
  transition:all 2s ease;
}

.animate-enter {
    left: -100%;
}

.animate-enter.animate-enter-active {
    left: 0;
}

.animate-leave {
    left: 0;
}

.animate-leave.animate-leave-active {
    left: 100%;
}

有没有办法通过路由（URL）改变来为ng-view更改设置动画？

Answer 1

ng-view可以使用动画。事实上，它有官方的例子。看看这个link。

另外请记住，您还需要声明ngAnimate依赖项才能正常工作：

var app = angular.module('App', [
    'ngRoute',
    'ngAnimate'
]);

HTML

<div class="content">
    <div class="question" ng-view></div>
</div>

类.question定义CSS动画：

.question.ng-enter,
.question.ng-leave {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

您修改后的演示Plunker。

迷你项目

我还创建了一个展示不同ngView动画的小项目。请查看 page 。

Answer 2

使用Angular Animation 1.2+对CSS规则进行了一些更改。不再使用ng-animate指令，因此AngularJS现在根据事件更改元素的类，例如hide，show等。

你可以在CSS中定义这些：

.toggle {
    -webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* easeOutQuad */
    -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* easeOutQuad */
}

.toggle.ng-enter {
    opacity: 0;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
}

.toggle.ng-enter-active {
    opacity: 1;
}

.toggle.ng-leave {
    opacity: 1;
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
}

.toggle.ng-leave-active {
    opacity: 0;
}

.toggle.ng-hide-add {
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    opacity: 1;
}

.toggle.ng-hide-add.ng-hide-add-active {
    opacity: 0;
}

.toggle.ng-hide-remove {
    transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    display: block !important;
    opacity: 0;
}

.toggle.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}

这样，当您拥有HTML元素时，您实际上只需要定义class="toggle"。当您的应用运行Angular时，将适当地附加类。

Here is a good resource for different animation techniques by Augus

And here is a break down of the changes in AngularJS Animations

Answer 3

在1.2+中你不再需要指令，css表示法也已改变了。

1.2.5的做法如下：

为您的视图提供课程：

<div data-ng-view class="mainview-animation"></div>

添加以下依赖项：

/**
 * Main Application & Dependencies
 * @type {*}
 */
var mainApp = angular.module('app', [
    // Angular modules
    'ngRoute',
    'ngAnimate'
]);

然后添加以下CSS：

/*
 The animate class is apart of the element and the ng-enter class
 is attached to the element once the enter animation event is triggered
*/
.mainview-animation.ng-enter {
  -webkit-transition: .3s linear all; /* Safari/Chrome */
  -moz-transition: .3s linear all; /* Firefox */
  -o-transition: .3s linear all; /* Opera */
  transition: .3s linear all; /* IE10+ and Future Browsers */
}

/**
 * Pre animation -> enter
 */
.mainview-animation.ng-enter{
  /* The animation preparation code */
  opacity: 0;
}

/**
 * Post animation -> enter
 */
.mainview-animation.ng-enter.ng-enter-active { 
  /* The animation code itself */
  opacity: 1;
}

Answer 4

只是要添加到接受的答案，有必要定义position：absolute或display：block to .ng-enter和.ng-leave。当我试图在路线变化中淡出ng-view并且不想使用绝对定位时，我挣扎了一段时间。没有用于转换的浏览器前缀的示例：

//add animate class to ng-view

//css
.animate.ng-leave, .animate.ng-enter { 
    transition: 1s cubic-bezier(0.5, 0.1, 0.25, 1) all;
}
.animate.ng-enter, .animate.ng-leave.ng-leave-active {
    opacity: 0;
    display: block;
}
.animate.ng-leave, .animate.ng-enter.ng-enter-active {
    opacity: 1;
    display: block;
}

对于我的具体情况，我删除了从ng-leave的转换，因此不会有元素重叠，这会导致由于块显示而导致一个元素被按下。

通过路径更新ng-view时的ng-animate

4 个答案:

您修改后的演示Plunker。

迷你项目