角度6动画* ngIf，过渡不起作用

问题描述

该项目展示了两种动画变体。

The project presents two variants of animation.

动画选项1，触发器（'animationOption1'）

Animation Option 1, trigger('animationOption1')
Works without complaints.

动画选项2，触发器（'animationOption2'）

转换不会在这里工作。

app.component.html

app.component.html

<h1>Animation Option 1</h1>
<div (click)="changeDivState()"
     [@animationOption1]="clickedDivState"
>Click Me
</div>

<h1>Animation Option 2</h1>
<button (click)="toggleMenu()">Click Me</button>
<ul *ngIf="isMenuOpen"
    [@animationOption2]="isMenuOpen ? 'open': 'close'"
>
  <li>Menu Item 1</li>
  <li>Menu Item 2</li>
  <li>Menu Item 3</li>
</ul>

app.component.ts

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('animationOption1', [
      state('start', style({
        backgroundColor: 'yellow',
        width: '150px',
        height: '150px'
      })),
      state('end', style({
        backgroundColor: 'green',
        width: '300px',
        height: '300px'
      })),
      transition('start => end', animate(1500)),
      transition('end => start', animate('800ms 0.5s ease-out'))
    ]),
    trigger('animationOption2', [
      state('close', style({
        opacity: 0,
        backgroundColor: 'yellow'
      })),
      state('open', style({
        opacity: 1,
        backgroundColor: 'green'
      })),
      transition('close <=> open', animate(3000)),
    ])
  ]
})
export class AppComponent {
  isMenuOpen = false;

  clickedDivState = 'start';

  changeDivState() {
    this.clickedDivState = 'end';
    setTimeout(() => {
      this.clickedDivState = 'start';
    }, 3000);
  }

  toggleMenu(): void {
    this.isMenuOpen = !this.isMenuOpen;
  }
}

谷歌搜索没有解决方案。

Googling did not lead to a solution.

推荐答案

要使其正常工作，您需要删除 * ngIf = isMenuOpen 在< ul> 上。 Angular无法计算已关闭 / 打开状态之间的过渡，因为当<$ c时该元素根本不存在$ c> isMenuOpen 是 false 。

To get this to work you will need to remove the *ngIf="isMenuOpen" on the <ul>. Angular is unable to calculate the transition between the closed/open states as the element simply does not exist when isMenuOpen is false.

这里是显示了动画，并移除了 * ngIf 。

Here is a StackBlitz showing the animation in action with *ngIf removed.

或者，您也可以使用状态与 * ngIf 结合使用。看起来像这样：

Alternatively you can utilize entering/leaving states to use in conjunction with *ngIf. It would look like this:

trigger('animationOption2', [
  transition(':enter', [
    style({ backgroundColor: 'yellow' }),
    animate(300)
  ]),
  transition(':leave', [
    animate(300, style({ backgroundColor: 'yellow' }))
  ]),
  state('*', style({ backgroundColor: 'green' })),
])

这里是发挥作用。

这篇关于角度6动画* ngIf，过渡不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！