Css 角度4平滑动画

我正在尝试在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）的宽度未设置动画，而反向动画的平移也未设置动画，因此这无法按预期工作。 我想做一些“更流畅”的事情，但我已经努力了好几天

这是我做的一个例子，告诉你我做了什么以及我尝试过的不同的事情（评论）（首先是plunkr不要评判我x）

---

谢谢你的帮助

我认为，通过不使用关键帧并切换到使用“缓进-缓出”变换，您将能够获得所需的动画效果。如果要通过对状态和图形化触发器的这些更改来编辑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'))


        ])
    ]

---

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

我认为您可以通过不使用关键帧并切换到使用“缓进-缓出”变换来获得所需的动画效果。如果要通过对状态和图形化触发器的这些更改来编辑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'))


        ])
    ]

---

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

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