如何动态更新angular动画？ （角 8）

Question

我正在使用这样的 angular 动画：

@Component({
  selector: 'app-navbar',
  animations: [
    trigger('openClose', [
      // ...
      state(
        'open',
        style({
          height: this.navBarHeight ? this.navBarHeight.toString() + 'px' : '0px',
          opacity: 1,
          backgroundColor: 'yellow',
        }),
      ),
      state(
        'closed',
        style({
          height: '0px',
          opacity: 1,
          backgroundColor: 'green',
        }),
      ),
      transition('open => closed', [animate('0.3s')]),
      transition('closed => open', [animate('0.3s')]),
    ]),
  ],
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss'],
})

export class NavbarComponent implements OnInit {

  public navBarHeight = 0;

 public ngOnInit() {
    this.navBarHeight = this.navBarContainer.nativeElement.offsetHeight;
  }

}

所以我想要动画的元素有一个基于服务器的动态高度，所以我需要在页面完全加载时保存原点高度。

在 ngOnInit 中我可以获得元素的高度，但问题是当我在获得我想要的高度之前尝试定义动画时我得到了 Cannot read property 'navBarHeight' of undefined。

有没有办法动态设置动画设置？

Answer 1

尝试在模板中设置元素的高度，这样您就可以访问计算出的高度 [ngStyle]="{'height': this.navBarHeight}" 并将动画中的高度设置为通配符 style ({ height: '*', ... })

Answer 2

我发现一个简单的方法是使用 AUTO_STYLE ，只需从 angular 导入它：import { AUTO_STYLE} from '@angular/animations';

并使用它：

 animations: [
    trigger('openClose', [
      // ...
      state(
        'open',
        style({
          // height: this.navBarHeight.toString() + 'px',
          height: AUTO_STYLE,
          opacity: 1,
          backgroundColor: 'yellow',
        }),
      ),
      state(
        'closed',
        style({
          height: '0px',
          opacity: 1,
          backgroundColor: 'green',
        }),
      ),
      transition('open => closed', [animate('0.3s')]),
      transition('closed => open', [animate('0.3s')]),
    ]),
  ],