3

免责声明- 请注意，我知道我在这里含糊不清而且水平很高，但我目前不知道我需要做什么......

我正在使用或者我应该说我正在尝试学习 Angular2，我真的很想使用发布候选版 3/4 中提供的新动画 API。文档在这里：https ://angular.io/docs/ts/latest/guide/animations.html

现在，这一切看起来都很简单，但是当我们更改应用程序 url（导航到子视图）时，我想应用 CSS 转换，但是我不确定如何在 main.ts 组件或任何组件中捕获位置更改事件我希望在其中添加animations属性。文档给出的示例使用@triggerName语法来应用或切换动画，但我不确定这是否适用于希望动画页面转换时。

所以如果这是我的main.html：

<my-app>
    <div class="nav">
        <a linkTo="/">Home</a>
        <a linkTo="/here">Here</a>
        <a linkTo="/there">There</a>
    </div>

    <div class="main">
        <!-- this is what I want to animate -->
        <route-view></route-view>
    </div>
</my-app>

这是在我的main.ts

@Component({
    selector: 'my-app',
    directives: [  ],
    pipes: [ ],
    templateUrl: 'src/main.html',
    // I need to capture the location change and apply a css animation
    animations: [
    // Do I need a state for this????
        state('in', style({transform: 'translateX(0)'})),
            transition('void => *', [
                style({transform: 'translateX(-100%)'}),
                animate(100)
            ]),
            transition('* => void', [
                animate(100, style({transform: 'translateX(100%)'}))
            ])
  ])
    ]
})

我正在使用@ngrx/router，我知道这带有一个 LocationChange 类。非常感谢您的任何建议......如果您知道一个好的教程的链接，将不胜感激！

这是我试图用 AngularJS 实现的效果：https ://codepen.io/schonert/pen/InAzi

4

0 回答 0