Question

我有一堆缩略图，当用户将鼠标悬停在缩略图上时，我希望缩略图的底部出现一个叠加幻灯片，而当用户不将鼠标悬停在缩略图上时，则使幻灯片缩回。

animations: [
  trigger('overlaySlide', [
    state('in', style({})),
    transition(':enter', [
      style({
        transform: 'translateX(-100%)'
      }),
      animate('0.5s ease')
    ]),
    transition(':leave', [
      style({
        transform: 'translateX(-100%)'
      }),
      animate('0.5s ease')
    ])
  ])
]

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="gallery" class="text-center">
  <ng-container *ngFor="let picture of gameImages">
    <img src="/assets/images/maple.jpg" class="img-thumbnail">
    <div class="overlay">
      <div class="overlay-text" [@overlaySlide]> Hello World</div>
    </div>
  </ng-container>

</div>

Answer 1

由于您使用的是:enter和:enter关键字，因此需要从DOM中删除该元素。尝试这样的事情：

<div @overlaySlide *ngIf="show" (mouseenter)="show = true" (mouseleave)="show = false"> Hello World</div>

鼠标悬停时更改动画触发器

1 个答案: