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

Question

I need help with ng2 animate. I need to prepare simple hover effect based on this:

@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'))
        ])
    ]
})

I need a hint how can I assign that to the template? On Ng2 Docs, we have implementation base on object parameter. I don't need to change any parameter of my

item/object/album 

from the category , just want assign animation to template.

Regards! Greg

Answer 1

As long as you are not using the "bottom" property as a hover, any regular ":hover" pseudo class will work. For example:

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

Support for pseudo classes within the state is yet a feature request

Possible workaround: Add a parent to your element by wrapping it, then add the :hover pseudoclass to this parent.

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

Then

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

Answer 2

If you need to override a property being set by the Angular animation you could always use !important .

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

Using the important flag is not the most desirable solution, but it will work until we get support for pseudo classes in Angular animation.