使用角度2滑动动画

Question

我使用count++设计webpage，其中包含用于在X比例转换上转换的动画。它工作得很好，正如官方angular animations page详细解释的那样。

基本上我在dom翻译angular 2。我就是这样做的：

md-card：

component.html

<md-content class="md-padding" layout="row" layout-wrap layout-align="center start"> <div flex="30" layout="column" flex-xs="100"> <md-card *ngFor="let spinItem of spinnerItems" [@flyInOut]="'in'"> <md-card-header> <img src="assets/Cherry-80.png" md-card-avatar> <div class="md-card-header-text"> <md-card-title>RollnEat</md-card-title> <md-card-subtitle>Take away and dine-in</md-card-subtitle> </div> </md-card-header> <img src="assets/background-image-1.jpg" md-card-image> <md-card-title> <span class="md-headline">{{spinItem}}</span> </md-card-title> <md-card-content> <p> content comes here </p> </md-card-content> </md-card> </div> </md-content> ：

component.js

要做：

我知道它涉及的一些css / html警告，但我想设计/放置卡片，这样它们有点类似于以下样本：