代码之家 › 专栏 › 技术社区 › Slicc

将角度动画应用于零部件

angular-animations angular

0

Slicc · 技术社区 · 7 年前

我有一个角度6页,其中包含三个角度组件:

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

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开发工具中的元素获得了应用的比例和背景颜色,但是浏览器中的组件本身没有明显的变化。

我看到的所有示例都是将角度动画应用于标准HTML元素(div、buttons等),而没有将状态更改应用于角度组件的实例。

有人能告诉我我需要做什么让这个动画工作?

1 回复 | 直到 7 年前

1

Antoniossss 7 年前

很可能是因为自定义HTML元素是内联的,而您需要块。

将此添加到组件css:

:host{
    display:block;
}

或者在当前视图(当前页面)上添加规则CSS rule componentX 阻碍。

display:block; 任何一个组件。