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

Question

我尝试动画AngularJS中ng-view div的变化.

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

<div ng-view></div>

我有另一个html文件(view1.html)里面只有divs.

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

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

我点击按钮改变路径,并调用:

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

网站的URL更改,只有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%;
}

有没有办法通过route-(URL)-changing来动画ng-view变化？

Answer 1

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

还记得你还需要声明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动画的小项目.看看这个页面.

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时,将适当地附加类.

这是Augus的不同动画技术的好资源

这里是对AngularJS动画中的更改的细分

Answer 3

在1.2+你不再需要该指令,css符号也已改变.

1.2.5方式如下:

为您的View提供一个课程:

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