时间戳

首页 > 解决方案 > 将角度动画应用于组件

angular - 将角度动画应用于组件

问题描述

我有一个 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 值时，组件将动画进出​​。为此，我创建了一个角度动画，如下所示：

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、按钮等），而没有将状态更改应用于角度组件的实例。

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

标签： angularangular-animations

解决方案

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

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

:host{
    display:block;
}

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

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

推荐阅读