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; 
} 

使用的重要標誌是不是最可取的解決方案，但它會工作，直到我們得到了在角動畫僞類的支持。