Я работаю над приложением Angular 5, для которого требуется sidenav с возможностью вставки / выдвижения.Попытка использовать состояния анимации, чтобы получить этот эффект.Состояние css применяется правильно, и div перемещается внутрь и наружу, однако это скачок, то есть анимация замедления 1500 мс не работает.
Желаемый эффект - 
Я импортировал модуль BrowserAnimationsModule и добавил его для импорта в app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
viewer.component.html файл -
<div class="container">
<div class="main-viewport">
<app-viewer-container viewer_mode=true></app-viewer-container>
</div>
<div class="side-bar-container" [@slideInOut]="sidebarState">
<div class="nav-toggle-btn">
<div class="btn" (click)="toggleMenu()">
</div>
</div>
<!-- <app-parameter-viewer globals=true></app-parameter-viewer> -->
</div>
</div>
viewer.component.ts file
@Component({
selector: 'app-viewer',
templateUrl: './viewer.component.html',
styleUrls: ['./viewer.component.scss'],
animations: [
trigger('slideInOut', [
state('in', style({
transform: 'translate3d(0, 0, 0)',
})),
state('out', style({
transform: 'translate3d(70%, 0, 0)'
})),
transition('in <=> out', animate('1500ms ease-out'))
]),
]
})
export class ViewerComponent implements OnInit {
// only relevant code added
sidebarState:string;
toggleMenu(){
this.sidebarState = this.sidebarState == 'out' ? 'in' : 'out';
}
}
То, что я пробовал
- Попытка с использованием модуля NoopAnimationsModule вместо BrowserAnimationModule
- Попытка добавления 'display: block' в div боковой панели-контейнера на основе этого вопроса ()
- Попытка добавления web-animations-js
- Попытка удаления анимации, упрощающей вывод всех элементов, и выполнение только анимации (1500 мс)
- Попытка удаления внутреннего дочернего компонента в боковой панели-контейнер, если это не анимация
- Попытка с использованием animate (1.5 с) и animate (1500) вместо 1500 мс
- Попытка перемещения кнопки переключения за пределы анимированного контейнера
- Переустановленные @ angular / animations и @ angular / platform-browser
Не уверены, что делать дальше!Любая помощь могла бы быть полезна!