Angular2 анимированный [скрытый] элемент

у меня есть боковая панель, которую я показываю / скрываю, используя логическое значение:

[hidden]='toggleSidebar'

Я пытался найти правильный способ добавить переход к этому элементу, но до сих пор был только частично успешным с помощью этого метода : [class.show]='!toggleSidebar'. Однако применение стилей css к этому классу работает только частично.

как добавить слайд-в или fade-в анимации к элементу, содержащему маршрутизатор розетки, такие как это?

<aside [hidden]="toggleSidebar">
  <router-outlet name="aside"></router-outlet>
</aside>
9
angular css

2 ответов

С помощью [hidden] атрибут вы просто не можете достичь эффекта перехода/анимации, так как нет никаких последующих изменений шага, а только изменения состояния, которые отражают либо элемент виден или скрыт.

что вы можете сделать, это использовать opacity и visibility.

<aside class="sidebar" [style.opacity]="toggleSidebar ? '0' : '1'" [style.visibility]="toggleSidebar ? 'hidden' : 'visible'">
  <router-outlet name="aside"></router-outlet>
</aside>

укажите время перехода для боковой панели для изменения состояния.

.sidebar {
  transition: all .3s;
}

Примечание: его лучше избегать [hidden] атрибут, если вы с нетерпением ждете поддержки Internet Explorer 9 и 10. :)

9

желаемое поведение может быть достигнуто с ngIf. От официальное руководство:

недействительной государственной

специальное состояние void может применяться к любой анимации. Он применяется, когда элемент не присоединен к представлению, возможно, потому, что он еще не добавлен или удален. Состояние void полезно для определения анимации ввода и вывода.

в примере ниже div показывает вверх от верхней части экрана когда условие оценивается как true.

HTML:

<div *ngIf="panelVisible" [@panelInOut]>....</div>

TS:

 @Component({
    ....
    animations: [
        trigger('panelInOut', [
            transition('void => *', [
                style({transform: 'translateY(-100%)'}),
                animate(800)
            ]),
            transition('* => void', [
                animate(800, style({transform: 'translateY(-100%)'}))
            ])
        ])
    ]
})
8