对组件应用 angular 个动画

Question

我有一个 angular 6 页面，其中包含三个 angular 组件：

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

我想应用一个动画，这样当我设置 componentToShow 值时，组件将以动画方式进入或退出。为此，我创建了一个 angular 动画，如下所示：

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

我看到的所有示例都是将 angular 动画应用于标准 HTML 元素（div、按钮等...），状态更改不会应用于angular 组件的实例。

谁能告诉我需要做什么才能让这个动画正常工作？

Answer 1

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

将此添加到您的组件中 css:

:host{
    display:block;
}

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

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

对组件应用 angular 个动画

Apply angular animations to a component

angular

angular-animations