Question

我以有角度的方式做了一个悬停效果，但我在子元素，子元素上的传播悬停时遇到了麻烦。当Hower触摸按钮时，动画被重放。

当我使用mouseenter（）时，我失去了范围，并且在所有元素上都播放了动画。

动画：

animations: [
        trigger('albumState', [
            state('inactive', style({
                bottom: '0px',
                opacity: 0
            })),
            state('active', style({
                bottom: '20%',
                opacity: 1
            })),
            transition('inactive => active', animate('200ms ease-in')),
            transition('active => inactive', animate('200ms ease-in'))
        ])
    ]

HTML：

<masonry-brick 
        *ngFor="let album of categoryAlbums | orderBy: ['activeAlbums']" 
        (click)="goDetail(album)" 
        class="album__item" 
        id="album" 
        (mouseover)="active(album, $event)" 
        (mouseout)="inactive(album, $event)">
            <div class="album__item--cover-container">
                <img class="album__item--cover" [src]="this.getCoverPhoto(album.cover)" alt="album cover">
                <div class="album__item--story">
                    <div class="album__item--title">
                        {{ album.title | uppercase }}
                    </div>
                    <div class="album__item--description" [@albumState]="album.state">
                        <div class="item-desc">
                            {{ album.desc }}
                        </div>
                        <div class="item-button">
                            <input class="btn btn-success album__item--button" type="button" value="Enter">
                        </div>
                    </div>
                </div>
            </div>
</masonry-brick>

方法：

active(album: Album, event: Event) { 
        let target = $('.album__item');
        let child = $('.item-button');
        album.state = 'active';
        console.log("ENTERED MOUSENTER", album);
    }
inactive(album: Album, event: Event) { 
        let target = $('.album__item');
        album.state = 'inactive';
        console.log("ENTERED LEAVE", album);    
    }

正如我所说，如果我在方法target.mouseenter(()=>{[...]})中使用，我会失去我的范围，动画会在所有砌块上播放。

我的问题是：当悬停在按钮上传播时，如何防止重放动画：＆＃34; .item-button＆＃34;。为了实现这一目标，我设置了CSS＆＃34; pointer-event＆＃34;父级none中div的{{1}}级.album__item--description，但按钮必须处于有效状态。

Angular2在子元素上停止传播悬停事件，重放动画

0 个答案: