代码之家 › 专栏 › 技术社区 › CodyBugstein

完成后,角度动画会跳到不需要的值

angular-animations angular

0

CodyBugstein · 技术社区 · 7 年前

ngIf 这就变成了现实。

5px 50px 在里面 width . 但是,一旦它结束了,它只是成为全屏幕宽度!

这是这期杂志的复制品: https://stackblitz.com/edit/angular-flf7ha

代码

app.component.html

<button (click)="addBars()">Toggle Bar</button>

<div *ngFor="let bar of bars">
  <div id="bar" @horizontalBarGrow [style.width.%]="bar.width"></div>
</div>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('horizontalBarGrow', [
        transition(':enter', [
            style({ width: '5px' }),
            animate('500ms ease-out', style({ width: '50px' })),
        ]),
    ])
  ]
})
export class AppComponent  {
  name = 'Angular';

  bars = []

  addBars() {
    this.bars.push({ width: '10%'});
    this.bars.push({ width: '40%'});
  }
}

1 回复 | 直到 7 年前

1

0

ibenjelloun 7 年前

TL;博士

A. div 默认情况下为全宽:

A div with the default width :
<div style="background-color: #3498db; height: 50px;"></div>

转换结束后,div将再次使用默认值。

trigger('horizontalBarGrow', [
  state('true', style({ width: '50px' })),
  state('false', style({ width: '0px' })),
  transition('false <=> true', animate(500))
])

Here is an edit of your stackblitz.