Question

我正在尝试将动画应用到md卡（尝试复制https://teradata.github.io/covalent/#/components/expansion-panel）...我能够获取视图并应用动画但是当卡展开/折叠时的转换是我无法得到的光滑。我在这里做了一个演示http://plnkr.co/edit/kvzSSbseT5cbOv054i2u?p=preview，其中状态之间的转换很快。当我点击演示中的卡时，我正在尝试实现相同类型的动画......

animations: [
    trigger('animationState', [
        state('active', style({ height: '*' })),
        state('inactive', style({ height: '0px', display: 'none' })),
        transition('inactive => active', animate('150ms ease-out')),
        transition('active => inactive', animate('150ms ease-out'))
    ])
]

这些是我试图申请的动画。有人可以帮助我获得上述链接中的动画效果吗？

Answer 1

我刚刚在youtube上观看了这个教程。它为动画控制奠定了良好的基础......

https://coursetro.com/posts/code/25/Understanding-Angular-2-Animations-Tutorial

为angular2动画效果应用动画效果

1 个答案: