Angular 2 中的页面转换答案

【问题标题】：Page transitions in Angular 2Angular 2 中的页面转换
【发布时间】：2016-06-29 20:15:37
【问题描述】：

由于 angular 2 动画还没有完全更新，有没有办法用 css 为页面设置动画？

我尝试在组件中添加主机，但没有帮助。

例如这是我的组件：

@Component({
    selector: 'pos-projects-list',
    pipes: [AsyncPipe, SearchPipe],
    directives: [RippleDirective],
    templateUrl: 'app/dashboard/pages/projects/templates/list.html',
    host: {'class' : 'ng-animate'}
})

所以我在这里做的是向 pos-projects-list 添加类，您可以在屏幕截图中看到。

screenshot

【问题讨论】：

请提供更多详细信息。您尝试制作动画的component 的代码是什么？
我正在尝试为网站上动态的任何内容制作动画，例如 pos-projects-list，请查看屏幕截图

标签： angular css-animations

【解决方案1】：

常规的 CSS 动画可以正常工作：

http://www.w3schools.com/css/css3_animations.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

更新：实际问题是“如何更改宿主元素的类？”

示例如下：

@Component({
   selector: 'pos-projects-list',
   host: {'[class.ng-animate]':'someField'}
})
export class PosProjectListComponent implement AfterViewInit {
  someField: bool = false;

  // alternative way
  // @HostBinding('class.ng-animate') someField: bool = false;
  // -----------------------

  ngAfterViewInit() {
    someField = true; // set class `ng-animate` on `<pos-projects-list>`
  }
}

【讨论】：

问题不是 css3 动画，问题是如何将类附加到路由器插座以初始化该动画？
这是我得到的错误：原始异常：检查后表达式已更改。以前的值：“假”。当前值：“真”
尝试在一个回调函数中设置someField = true（按钮点击、计时器）。我也会在plnkr.co 中创建您的示例