Angular 4 平滑动画答案

【问题标题】：Angular 4 smooth animationAngular 4 平滑动画
【发布时间】：2018-04-28 10:14:33
【问题描述】：

我正在尝试使用一些动画在 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}),
])))

这不能按预期工作，因为第一步（小 => 拉格）宽度没有动画，而反向动画也没有平移。我想做一些“更顺畅”的事情，但我已经为此苦苦挣扎了好几天。

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

感谢您的帮助！

【问题讨论】：

标签： css angular typescript animation angular-animations

【解决方案1】：

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

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'))


        ])
    ]

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

【讨论】：

谢谢，这正是我想要的！ =)