У меня проблема с загрузкой анимации. В частности, моя анимация работает, нажав кнопку ОТКРЫТЬ / ЗАКРЫТЬ od fiv. Слева направо. Но в начале загрузки страницы (onInit) моя анимация выполняет переход, по которому нужно щелкнуть. Мой вопрос заключается в том, как запретить выполнение анимации onInit ??
Посмотрите на мой html код:
<div class="first-column pd-8" (click)="toggle()">
<div>
<span> {{ownership.truckCount}} </span>
<small>Trucks</small>
</div>
<div class="mg-top-8">
<span> {{ownership.trailersCount}} </span>
<small>Trailer</small>
</div>
</div>
<app-slide-panel [activePane]="isViewable ? 'right' : 'left'">
<div class="second-column pd-8 m-h-127" leftPane>
<h4 class="m-b-4" class="h4-style-relative"> test 1 </h4>
</div>
<div class="second-column pd-8 m-h-127 background-white-col" rightPane>
<div>
<h4 class="m-b-4" class="h4-style-relative"> test 2 </h4>
</div>
</app-slide-panel>
Мои ts:
animations: [
trigger('slide', [
state('left', style({ transform: 'translateX(0)' })),
state('right', style({ transform: 'translateX(-50%)' })),
transition('* => *', animate(300))
])
]
this.isViewable = true;
public toggle(e : any): void { this.isViewable = !this.isViewable; }
Мой слайд -панель компонента:
<div class="panes" [@slide]="activePane">
<div><ng-content select="[leftPane]"></ng-content></div>
<div><ng-content select="[rightPane]"></ng-content></div>
</div>
type PaneType = 'left' | 'right';
animations: [
trigger('slide', [
state('left', style({ transform: 'translateX(0)' })),
state('right', style({ transform: 'translateX(-50%)' })),
transition('* => *', animate(50))
])
]
@Input() activePane: PaneType = 'left';
Я хочу снова представить свою проблему. На загружаемых страницах я хочу выключить, отключить все что угодно, только чтобы анимация не запускалась. Анимация запускает преобразование перехода -50% для загрузки, и похоже, что он уже запущен, что мне не нужно. Только при запуске (загрузка onInit) отключена анимация.