Я хочу разрешить плавное изменение страницы и плавное отображение или скрытие, которые будут применены ко всем компонентам моего приложения.
У меня есть этот код:
<wrapper ng-if="initialized && $root.me.type && $root.me.type!='guest'">
<header-component></header-component>
<div class="app-body">
<sidebar-component></sidebar-component>
<main class="main-content">
<ng-view></ng-view>
</main>
<aside-component></aside-component>
</div>
</wrapper>
<wrapper ng-if="initialized && $root.me.type=='guest'">
<div class="container">
<ng-view></ng-view>
</div>
</wrapper>
<confirmation-modal></confirmation-modal>
Обратите внимание наДиректива ng-view
, которая находится внутри некоторых других атрибутов.
весь приведенный выше код находится внутри <app></app>
, который находится в index.html
.
Это стили анимации, которые я хочу применить:
.ng-leave {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-ms-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-ms-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-ms-animation-timing-function: ease;
-o-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.ng-enter {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-ms-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-ms-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-ms-animation-timing-function: ease;
-o-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden; }
Как это можно сделать?