Question

我需要帮助ng2 animate。我需要根据这个准备简单的悬停效果：

@Component({
    selector: 'category',
    template : require('./category.component.html'),
    styleUrls: ['./category.component.scss'],
    animations: [
        trigger('albumState', [
            state('inactive', style({
                bottom: '0px'
            })),
            state('active', style({
                bottom: '200px'
            })),
            transition('inactive => active', animate('100ms ease-in')),
            transition('active => inactive', animate('100ms ease-in'))
        ])
    ]
})

我需要一个提示如何将其分配给模板？在Ng2 Docs上，我们有基于object参数的实现。我不需要更改

的任何参数

item/object/album

来自类别，只想将动画分配给模板。

问候！格雷格

Answer 1

只要您不使用“bottom”属性作为悬停，任何常规的“：hover”伪类都可以使用。例如：

.album:hover {
    background-color:red;
}

对州内的伪类的支持还是feature request

可能的解决方法：通过包装父元素将元素添加到元素中，然后将:hover伪类添加到此父元素。

<span class="parent">
    <div class="album">...</div>
</span>

然后

.parent:hover {
    bottom:50px; // or what you want to achieve here
}

Answer 2

如果您需要覆盖由Angular动画设置的属性，则可以始终使用!important。

.album:hover {
  bottom: 20px !important;
}

使用重要标志不是最理想的解决方案，但它会一直有效，直到我们在Angular动画中获得伪类的支持。

Angular2动画用于简单悬停，无任何状态变化

2 个答案: