在 div 上添加持续时间为 collapse/animation 的切换效果

Question

我想在高度 0 上添加一个 animation/transition - 在 div 上添加一个自动。我想在点击时产生切换效果。我已经构建了它，但问题是我想在它显示后立即显示 div，目前我隐藏了 div，它会在点击时切换。我希望它显示内容并在单击时隐藏，但现在它是隐藏的，并且在单击时出现。这是下面的代码。提前感谢您的帮助。而 plunker

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `<h1>Angular 2 Systemjs start</h1>
    <button type="button" class="btn btn-primary"
      (click)="height = height ? 0 : el.scrollHeight">Toggle collapse
    </button>

    <div       
      class="card card-block card-header block" [style.height]="height + 'px'" #el> 
      <div class="well well-lg">Some content</div>
    </div>
  `,
  styles: [`
    .block {
      overflow: hidden;
      -webkit-transition: height .5s;
      transition: height .5s;
    }
  `]
})
export class App {
  height = 0;
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 1

导出时添加元素的高度class。如果你定义 height = 0 那么它就不会显示。根据您的代码，如果您进行如下修改，那么它将按照您的要求运行。

export class App {
  height = 90;
}

Answer 2

您可以通过给 height 一个等于元素高度的适当初始值来解决这个问题。要动态确定元素的高度，请使用：

@ViewChild('el') el: ElementRef;
ngAfterViewInit() {
  setTimeout(() => this.height = this.el.nativeElement.scrollHeight, 0);
}

将其放入您的组件中 class。

注意：我正在使用 setTimeout，否则 angular 会抱怨值在检查后被更改。我不是 100% 清楚为什么会这样，但这是公认的解决方法。

在 div 上添加持续时间为 collapse/animation 的切换效果

add a Toggle effect with a duration on div for collapse/animation

html

collapse

angular-ui-bootstrap

angular