Angular 4 流畅的动画

Question

我正在尝试在 Angular 4 中使用不同的卡片（例如统计信息、图表等）使用一些动画制作一种主页。对于图表卡片，我制作了一个图标按钮来切换 div 以使其更大（类似全屏）。动画代码目前是这样工作的：

state('small', style({position: 'relative', width: '50%'})),
state('large', style({
    transform: 'translateY(-150px)',
    position: 'absolute',
    width: '100%'
})),
transition('small => large', animate('600ms ease', keyframes([
    style({position: 'absolute', width: '100%', offset: 0}),
    style({transform: 'translateY(-150px)',  offset: 1.0}),
]))),
transition('large => small', animate('600ms ease', keyframes([
    style({transform: 'translateY(-150px)',  offset: 0}),
    style({width: '50%', right: 0, offset: 1.0}),
])))

这没有按预期工作，因为对于第一步 (small => lage) 宽度没有动画，对于反向动画，平移也不是。我想做点什么"smoother"，但我已经努力了好几天才能做到。

这是我制作的 quick plunkr 向您展示我所做的以及我尝试过的不同事情（评论）（首先请不要评判我 x）

感谢您的帮助！

Answer 1

我认为您可以通过不使用关键帧并切换到使用缓入缓出过渡来获得所需的动画效果。如果您要通过对状态和 graphAnimation 触发器的这些更改来编辑您的 plunkr：

animations: [
        trigger('panelAnimation', [
            state('in', style({transform: 'translateX(0)'})),
            transition('void => *', animate('600ms ease-in', keyframes([
                style({opacity: 0, offset: 0}),
                style({opacity: 1, offset: 1.0})
            ])))
        ]),
        trigger('graphAnimation', [
            state('small', style({
              position: 'absolute', 
              right: 0, 
              width: '50%'
              transform: 'translateY(0px)'
            })),
            state('large', style({
                transform: 'translateY(-150px)',
                position: 'absolute',
                right: 0,
                width: '100%'
            })),
            transition('small => large', animate('600ms 0.2ms ease-in-out')),
            transition('large => small', animate('600ms 0.2ms ease-in-out'))


        ])
    ]

这应该会给你想要的效果。或者，您可以考虑使用组来允许独立的动画计时。

Angular 4 流畅的动画

Angular 4 smooth animation

css

angular

typescript

animation

angular-animations