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

"bottom"プロパティをホバーとして使用していない限り、通常の "：hover"疑似クラスは動作します。たとえば：この親に:hover疑似クラスを追加し、それをラップすることによって、あなたの要素に親を追加します。州内の疑似クラスの

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

サポートはまだfeature request

可能な回避策です。

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

重要なフラグを使用することは最も望ましい解決策ではありませんが、角度付きアニメーションで擬似クラスをサポートするまで機能します。