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 

任何参数从的类别发生变化，只是想分配动画模板。

问候！ Greg

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 
} 

Answer 2

如果你需要重写的属性由角动画，你总是可以使用!important设置。

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

使用的重要标志是不是最可取的解决方案，但它会工作，直到我们得到了在角动画伪类的支持。