Question

我想在高度0上添加动画/过渡 - 在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

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

export class App {
  height = 90;
}

Answer 2

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

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

将它放在组件类中。

注意：我正在使用setTimeout，因为否则有角度抱怨在检查后值被更改。我不是100％清楚为什么会这样，但这是可接受的解决方法。

为div折叠/动画添加一个具有持续时间的切换效果

2 个答案: