Я использую этот https://valor-software.com/ng2-bootstrap/#/collapse и я хотел бы добавить анимацию/переход по высоте 0 - автоматически, но мы все знаем, что вы не можете добавить переход по высоте автоматически. Я хотел бы добавить эффект slideToggle с продолжительностью. пытался найти решение более 3-х дней...
есть ли известное решение для этого?
Анимация скоро появится в ng2-bootstrap. Вам просто нужно немного подождать.
1) Сегодня вы можете использовать в качестве обходного пути следующее:
@Component({
selector: 'my-app',
template: `
<button type="button" class="btn btn-primary"
(click)="isCollapsed = !isCollapsed">Toggle collapse
</button>
<div (collapsed)="setHeight(el, 0)"
(expanded)="setHeight(el, 0);setHeight(el, el.scrollHeight)"
[collapse]="isCollapsed"
class="card card-block card-header block" #el>
<div class="well well-lg">Some content</div>
</div>
`,
styles: [`
.block {
display: block !important;
overflow: hidden !important;
-webkit-transition: height .5s;
transition: height .5s;
}
`]
})
export class App {
isCollapsed: boolean = true;
constructor(private renderer: Renderer) { }
setHeight(el, height) {
this.renderer.setElementStyle(el, 'height', height + 'px');
}
}
См. также рабочий пример планкера.
2) Без директивы CollapseDirective вы можете сделать это так
@Component({
selector: 'my-app',
template: `
<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;
}
