javascript - 用于简单悬停的 Angular2 动画，没有任何状态变化

Question

我需要有关 ng2 动画的帮助。我需要基于此准备简单的悬停效果:

@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 上，我们有基于对象参数的实现。我不需要更改我的任何参数

item/object/album 

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

问候!格雷格

Answer 1

只要您不使用“底部”属性作为悬停，任何常规的“: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
}