Ответ 1
Вы можете использовать CSS, или AnimationBuilder
Для способа CSS вы можете проверить этот пример из своего репо, что делает именно то, что вы ищете.
С помощью AnimationBuilder вы можете моделировать такое же поведение, как это.
Сначала вы настраиваете шаблон, в котором будет удерживаться кнопка и div для переключения
@Component({
// Setting up some styles
template: `
<div animate-box #box="ab" style="height:0; width:50%; overflow: hidden;">Some content</div>
<button (click)="box.toggle(visible = !visible)">Animate</button>
`,
directives : [AnimateBox] // See class below
})
Затем вы создаете директиву, которая будет обрабатывать анимацию
@Directive({
selector : '[animate-box]',
exportAs : 'ab' // Necessary, we export it and we can get its 'toggle' method in the template
})
class AnimateBox {
constructor(private _ab: AnimationBuilder, private _e: ElementRef) {}
toggle(isVisible: boolean = false) {
let animation = this._ab.css();
animation
.setDuration(1000); // Duration in ms
// If is not visible, we make it slide down
if(!isVisible) {
animation
// Set initial styles
.setFromStyles({height: '0', width: '50%', overflow: 'hidden'})
// Set styles that will be added when the animation ends
.setToStyles({height: '300px'})
}
// If is visible we make it slide up
else {
animation
.setFromStyles({height: '300px', width: '50%'})
.setToStyles({height: '0'})
}
// We start the animation in the element, in this case the div
animation.start(this._e.nativeElement);
}
}
Ссылка
- Анимационный API, это супер просто, действительно, очень просто.
Примечания
Это временный API, новый, называемый ngAnimate 2.0, пока недоступен. Но вы можете проверить, что нового в @matsko говорят в AngularConnect - ngAnimate 2.0.
Здесь plnkr с репродукцией.
Надеюсь, это поможет.