如何使角度动画div显示在鼠标输入？

Question

我正在尝试动画一个div，当鼠标进入那个特定的div时，显然我做不到。你知道这在我的背景下是如何工作的吗？

这是TS文件中的动画

  animations: [
  trigger('explainerAnim', [
    transition('* => *', [
    query('.card', style({ opacity: 0, transform: ' translateX(-400px'})),
    query('.card', stagger('100ms', [
      animate('1000ms 0.9s ease-out', style({opacity:1, transform: 'translateX(0)'}))
    ]))

    ])
  ])
]

这是我想根据鼠标输入显示的div

<div  [@explainerAnim] class="col-sm-12 text-center about-page">
    <div class="card">
      <div class="developer-photo"></div>
      <div class="card-body">
        <h2>Who`s this guy?</h2>
        <p>
          I'm a Full-Stack Developer working for AppyWay in London. <br />
          I have a serious passion for implementing high quality web
          applications <br />
          using the Microsoft stack E.g .Net Core.
        </p>
      </div>
    </div>
    <div class="card developer-details">
      <div class="card-header developer-header">
        <h2>I`m Norbert Csibi</h2>
        <h5>Full-Stack Developer</h5>
      </div>
      <div class="card-body">
        <p>
          I am passionate about building excellent software that improves
          the lives of those around me.
        </p>
        <table class="table table-borderless">
          <thead>
            <tr>
              <th scope="col"></th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">EMAIL</th>
              <td>@gmail.com</td>
            </tr>
            <tr>
              <th scope="row">PHONE</th>
              <td>55255</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

Answer 1

您可以在要触发动画的div元素上添加(mouseenter)和(mouseleave)指令。

<div (mouseenter)="startAnimation()" (mouseleave)="stopAnimation()">
</div>

然后，您可以使用angular animation states添加两个状态，一个是动画状态，另一个不是动画状态。并在startanimation()和stopAnimation()方法中设置两个不同的状态。

这里我给你一个如何使用角度状态的例子：

在TypeScript中：

@Component({
  selector: 'app-open-close',
  animations: [
    trigger('openClose', [
      // ...
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ],
  templateUrl: 'open-close.component.html',
  styleUrls: ['open-close.component.css']
})
export class OpenCloseComponent {
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }

}

在HTML中：

<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

Answer 2

由于这个问题在我的搜索排名中排名很高，而且不是很老，我想其他人可以用一个‘完整’的例子来帮助我。

grid您可以使用相对/绝对位置来定位带有the.highlight的diw类，但在本例中我使用css-

。

TLDR;主机监听器用于在鼠标进入和离开时更改动画状态

@HostListener('mouseenter', ['$event'])
onOver(event: MouseEvent): void {
    this.highlightAnimationState = this.highlightStates.mouseEnter;
    // console.log('mouseenter');
    // console.log('Enter: this.highlightAnimationState  :>> ', this.highlightAnimationState );

}

完整示例>>

这是一个类，用于表示团队的一行、赛道，如下所示：

|团队名称|(点表示100%完成前的最大百分比)|团队信息

它在父组件中的用法如下所示(有一个要显示的团队数组)。

race-board.component.html

<main class="main-content">
    <div *ngFor="let team of raceTeams">
        <app-race-track [team]="team">
            <!-- if you are not familiar with ng-content (see 'app-race-track' component) 
                it is simply used to output whatever is inside the tags here  -->
            <app-race-track-divider [colorClass]="dividerPositions.getColor(i)"></app-race-track-divider>
        </app-race-track>
    </div>
</main>

race-track.component.html

<div
  class="race-track-row"
  *ngIf="team; else loadingTemplate">

  <div [@highlightTrigger]="highlightAnimationState" class="highlight">
    <!-- note, this is used to create higlight effect on mouseover -->
  </div>

  
  <div class="divider">
    <ng-content>
      <!-- here a divider line is printed; if it should be. -->
    </ng-content>
  </div>
  
  <div class="team-details">
    <div class="team-name">
      {{team?.Name | shorten | uppercase }}
    </div>
  </div>
  
  <div class="race-track" #raceTrackContainer>
    <ng-container *ngFor="let item of filledDots; let i = index">
      <div class="percentage-dot" id="filled-dot-{{i}}">
        <mat-icon class="mat-icon-scale-up mat-icon-color-dark-grey" [inline]="true">
          lens
        </mat-icon>
      </div>
    </ng-container> 
  </div>

  <div class="team-info">
    <img src="../assets/images/race-board/raceboard-team-image.png" />
  </div>

    </div>
    <ng-template #loadingTemplate>
      ... Loading race team ...
    </ng-template>
</div>

您可以使用.highlight类使用相对/绝对位置来定位div，但是我使用css-grid，它看起来像这样

race-track.component.scss

@use 'src/app/race-board-app-module' as appStyles;

/* the container of the component */
.race-track-row {
  position: relative;
  margin-top: 0.4rem;
  width: fit-content;
  display: grid;
  grid-template-columns: 200px auto 80px;
  grid-template-rows: auto 3rem ;
  row-gap: 0.3rem;
  // column-gap: 15px;
  /* note: use dots to leave an area blank */
  grid-template-areas:
  " . track-divider . "
  " team-details race-track team-info ";
}

/*note, this is used to create highlight effect on mouseover */
.highlight{
  width: 100%;
  grid-row: 2/3;
  grid-column: 1/4;
}

.divider {
  grid-area: track-divider;
}

.race-track{
  grid-area: race-track;
  position: relative;
  padding-left: 2rem;
  padding-right: appStyles.$race-track-padding-right;
  display: flex;
  flex-wrap: nowrap;
}

/** name (perhaps also icon and percent later?) */
.team-details {
  grid-area: team-details;
  justify-self: right;
  align-self: center;

  margin-right: 0.5rem;
  padding-left: 1rem;
}

.team-name{
  font-weight: 500;
}
.percentage-dot {
  // align-items: center;
  padding-left: appStyles.$padding-dots-container;
  align-self: center;
}


.team-info{
  grid-area: team-info;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

/* variable must be imported like this for scale and calc to function */
$icon-scale: appStyles.$icon-scale;
.mat-icon-scale-up {
  transform: scale($icon-scale);
  padding: appStyles.$padding-dot-icons;
}

race-track.component.ts

/* you probably don't need all of the imports here, but cpy paste from implentation so .. */
import { Component, Input, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewChecked, Renderer2, HostListener } from '@angular/core';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';


@Component({
    selector: 'app-race-track',
    templateUrl: './race-track.component.html',
    styleUrls: ['./race-track.component.scss'],
    animations: [
        trigger('highlightTrigger', [
            state('in', style({
                opacity: 0.1,
                backgroundColor: 'lightblue'
            })),
            state('out', style({
                opacity: 0.0,
                backgroundColor: 'lightblue'
            })),
            /*
            this transitions has keyframes to controll the in-out speed with offset (time in point from in to out, ) you can also use 
            
            */
            transition('* <=> *', animate(50, keyframes([
                style({
                    opacity: 0.03,
                    offset: 0.3
                }),
                style({
                    opacity: 0.05,
                    offset: 0.5
                }),
                style({
                    opacity: 0.1, /* this should, but don't have to, match the 'final' state (i.e. 'in') */
                    offset: 1
                }),
            ])))

        ])
    ]
})
export class RaceTrackComponent implements OnInit, OnDestroy, AfterViewChecked {

    //animation:
    highlightAnimationState = "";
    highlightStates = {
        mouseEnter: 'in',
        mouseLeave: 'out'
    }

    @Input() public team?: RaceBoardTeam;

    /** dark icons; reprecenting team score as percent of max */
    public filledDots?: number[];

    constructor() { }

    /** Animations: hostlisteners are used to change the animation states
     * when mouse enters and leaves the race-track
    */
    @HostListener('mouseenter', ['$event'])
    onOver(event: MouseEvent): void {
        this.highlightAnimationState = this.highlightStates.mouseEnter;
        // console.log('mouseenter');
        // console.log('Enter: this.highlightAnimationState  :>> ', this.highlightAnimationState );

    }
    @HostListener('mouseleave', ['$event'])
    onOut(event: MouseEvent): void {
        this.highlightAnimationState = this.highlightStates.mouseLeave;
        // console.log('mouseleave');
        // console.log('Leave: this.highlightAnimationState  :>> ', this.highlightAnimationState );
    }

    // other stuff omitted .... 
}