Css Angular2推卡动画？

我希望

卡片的顶部像底部一样设置动画

单击
卡
并将相邻的
卡
推开时，使其全屏显示

我如何做到这一点：


这是我的密码：

   animations: [
     trigger('heroState', [
       state('inactive', style({ height: '*', width: '*' })),
       state('active',  style({ position: 'absolute', top: '0', margin: '0',  padding: '0', width: '100%', height: '100%' })),
       transition('inactive <=> active', animate('5000ms ease-in-out'))
     ])
   ],

动画：[
触发器（'heroState'[
状态（'inactive'，样式（{height:'*'，width:'*'}）），
状态（'active'，样式（{position:'absolute'，top:'0'，margin:'0'，padding:'0'，width:'100%'，height:'100%}），
过渡（“非活动-活动”，动画（“5000ms缓进-缓出”））
])
],

这取决于，如果你想把它推开，你不能定位任何绝对的东西，否则你将不得不做大量的计算

此代码推动底部卡的方向，但高度固定在500px。你可以调整/改变这个。高度：'100%'

左右

animations: [
     trigger('heroState', [
       state('inactive', style({ height: '*', width: '*' })),
       state('active',  style({ height: '500px' })),
       transition('inactive <=> active', animate('500ms ease-in-out'))
     ])
   ]

html{
身高：100%；
}
身体{
保证金：0；
填充：0；
身高：100%；
溢出：隐藏；
}
.集装箱{
背景色：#EEEEEE；
身高：100%；
填充：20px0；
边际上限：0；
溢出：隐藏；
过渡：所有0.5s缓解；
}
.盒子{
背景色：#ffffff；
宽度：300px；
高度：50px；
保证金：20px自动10px自动；
边界半径：5px；
盒影：0 10px#828282；
过渡：高度0.5s缓和，背景色0.05s缓和；
}
.选定{
身高：90%；
}
.点击{
背景色：#eeeeee；
}
.margin-4-first{
边际上限：0；
}
.边距4秒{
利润上限：-100px；
垫底：20%；
}
.保证金-4/3{
利润上限：-150px；
垫底：20%；
}

盒

这里是关于如何发布示例代码的提示，这将帮助您更快地得到答案。请验证

高度

不是一个好的解决方案。

卡的顶部未移动，底部可能超出屏幕。@user6148078是否签出plnkr链接？在这里，您可以调整高度，例如输入百分比，或em或。我将fixed设置为仅用于测试。@user6148078顺便问一下，它应该作为映像还是作为plnkr工作？因为我的解决方案与图像一样工作，除了顶卡的pusing，但这对于角度动画来说并不容易。谢谢你回答我的问题。是的，困难在于推顶牌。我尝试使用
位置：'absolute'，顶部：'0'
，但它看起来不像图像。检查我添加的代码，我希望它可以作为一个粗略的指南。它需要一些调整，但推顶牌。