将角度动画应用于组件

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

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

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

Answer 1

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

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

:host{
display:block;
}

或在当前视图(当前页面(上添加规则 CSS 规则以创建componentX块。

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