angular2组件过渡动画

Question

如何在angular2中制作页面过渡动画？

我试过这是代码但不工作

@Component({
   selector:'myPagefirstPage', 
})

@View({
   template: `<div  class="view-animate ng-animate" > 
                 <h1>First Page</h1>
              </div>`

然后我将我的动画类放在这样的 css 文件中

.view-animate.ng-enter {....}

但是没用

Answer 1

从 beta 15 开始，使用例如.ng-enter 和 .ng-enter-active 有效。请注意，您必须将 ng-animate 类添加到动画元素。有关示例，请参阅此 plunkr http://plnkr.co/edit/WcH3ndMN0HOnK2IwOCev?p=preview

但是，请注意 ng-leave 目前还不受支持，因为 DOM 节点在动画完成之前被移除(参见 https://github.com/angular/angular/pull/6768 )