2

在 4.2 版之前（目前在 RC 中），对于缩放动画，我曾经有以下代码：

export const magnifyAnimation = trigger('magnify', [
    state('default', style({
        'transform': 'scale(1)'
    })),
    state('magnified', style({
        'transform': 'scale(1.3)'
    })),
    transition('default <=> magnified', [
        animate('430ms ease-out')
    ])
]);

现在，由于 4.2 支持输入参数（为此等了很长时间），我要这样做：

component code:

<button
    [@magnify]="{ value: state, params: { scaleFactor: '1.3' }}"
    (mouseenter)="state = 'magnified'"
    (mouseleave)="state = 'default'">
        Hover me
</button>

并且动画代码更改为：

const zoomEffect = animation([
    animate('430ms ease-out', style({
        'transform': 'scale({{scaleFactor}})'
    }))
], { params: { scaleFactor: '1' } });

export const magnifyAnimation = trigger('magnify', [
    transition('default => magnified', useAnimation(zoomEffect), { params: { scaleFactor: '1.3' } }),
    transition('magnified => default', useAnimation(zoomEffect), { params: { scaleFactor: '1' } })
]);

但是，在动画代码中没有在状态中定义样式的情况下，动画完成后，元素（在本例中为按钮）总是跳转到它的自然大小。而且我不知道在 state() 代码块中指定输入参数的方法。

我也试过这个：

state('magnified', style({
    'transform': '*'
}))

我希望它会保留动画结束时转换所具有的任何价值，但它没有完成任何事情......

4

0 回答 0