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

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

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

如何使Angular动画div在鼠标输入时显示？

1 个答案: