css - 如何动态更新 Angular 动画？ ( Angular 8)

This question already has answers here:

Parameter in to Animation Angular2
                                
                                    （4个答案）
                                
                        
                                6个月前关闭。
            
                    
我正在使用这样的角度动画：

@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的问题。

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

最佳答案

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

关于css - 如何动态更新 Angular 动画？ ( Angular 8)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56901926/