当通过路由更新ng-view时，ng- animated

I try to animate the change of a ng-view div in AngularJS.

我尝试在AngularJS中对ng-view div进行动画处理。

So my div inside my index.html file looks like:

我的div在索引中。html文件的样子:

<div ng-view></div>

I have another html-file (view1.html) with just divs inside.

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

My app.js with the routing looks like:

我的app.js与路由看起来是:

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

I am changing the path with a click on a button, and call this:

我正在改变路径，点击一个按钮，然后调用这个:

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

The URL changes of the site, and only the ng-view-div gets updated. But when i am applying a ng-animation to it:

站点的URL更改，只有ng-view-div被更新。但是当我使用一个ng动画时:

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

It doesn't work. I included AngularJS 1.2.5, the animate-js file inside my index.html and also my CSS:

它不工作。我包括了AngularJS 1.2.5，索引中的animate-js文件。html和我的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%;
}

Is there a way to animate the ng-view change through route-(URL)-changing?

有没有一种方法可以使ng-view的改变通过路径(URL)改变?

4 个解决方案

#1

There are a few changes to the CSS rules with Angular Animation 1.2+. ng-animate directive is no longer used so AngularJS now changes the class of the element based on events, such as hide, show, etc.

对于角动画1.2+的CSS规则有一些修改。ng-animate指令不再使用，因此AngularJS现在根据事件(如隐藏、显示等)更改元素的类。

You can define these like so in your CSS:

你可以在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;
}

That way when you have your HTML element you really only have to define the class="toggle" for example. When your app runs Angular will append the classes appropriately.

这样，当您有HTML元素时，您只需要定义class="toggle"，例如。当你的应用程序运行时，它会适当地附加类。

Here is a good resource for different animation techniques by Augus

这是一个很好的资源为不同的动画技术由奥古斯

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

这里是对AngularJS动画的修改。

#2

ng-view can work with animation. In fact there is official example of it. Check out this link.

ng-view可以使用动画。事实上有官方的例子。查看这个链接。

Also remember that you also need to declare ngAnimate dependency for it to work:

还要记住，您还需要声明ngAnimate依赖于它的工作:

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

HTML

HTML

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

Class .question defines CSS animation:

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

Your modified demo Plunker.

---

Mini-project

I also created a little project demonstrating different ngView animations. Check it out this page.

我还创建了一个演示不同ngView动画的小项目。看看这一页。

#3

In 1.2+ you no longer need the directive, the css notation has changed aswell.

在1.2+你不再需要指令，css符号已经改变。

The 1.2.5 way of doing it is as follows:

1.2.5方法如下:

Give your View a class:

给你的视图一个类:

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

Add the following dependency:

添加以下依赖:

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

Then add the following CSS:

然后添加以下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;
}

#4

Just to add to the accepted answer it is necessary to either define position: absolute or display: block to .ng-enter and .ng-leave. I struggled with this for a while when trying to fade in ng-view on route change and didn't want to use absolute positioning. Example without browser prefixes for transition:

为了增加已接受的答案，需要定义位置:absolute或display: block to . nenter和。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;
}

For my specific situation I removed the transition from ng-leave so there wouldn't be overlap of elements which would cause one to be pushed down due to block display.

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