Question

我有一个角度为6的页面，其中包含三个角度成分：

<component1 [@componentState]="componentToShow === 0 ? 'active' : 'inactive'"></component1>
<component2 [@componentState]="componentToShow === 1 ? 'active' : 'inactive'"></component2>
<component3 [@componentState]="componentToShow === 2 ? 'active' : 'inactive'"></component3>

我想应用一个动画，以便当我设置componentToShow值时，该组件将动画化。为此，我创建了一个如下所示的有角动画：

animations: [
        trigger('componentState', [
            state('inactive', style({
                backgroundColor: '#eee',
                transform: 'scale(1)'
            })),
            state('active', style({
                backgroundColor: '#cfd8dc',
                transform: 'scale(1.1)'
            })),
            transition('inactive => active', animate('100ms ease-in')),
            transition('active => inactive', animate('100ms ease-out'))
        ])
    ]

当我将componentToShow值更改为0、1或2时，我可以看到该组件确实通过检查chrome dev工具中的元素而获得了应用的scale和backgroundColor，但是在浏览器中该组件没有可见变化本身。

我看到的所有示例都是将角度动画应用于标准HTML元素（div，按钮等），没有将状态更改应用于角度组件实例的情况。

有人可以告诉我如何使动画生效吗？

Answer 1

最可能的原因是自定义HTML元素是内联的，而您需要使用块。

将此添加到组件CSS：

:host{
    display:block;
}

或在当前视图（当前页面）上添加规则CSS规则以制作componentX块。

由于您使用的是Firebug或其他工具，因此可以通过将display:block;添加到任何这些组件中来进行实时测试。

将角度动画应用于组件

1 个答案: