dashboard: improve animation

This commit is contained in:
nemunaire 2018-12-06 03:48:23 +01:00
commit 93519e5f62
3 changed files with 49 additions and 63 deletions

View file

@ -28,7 +28,8 @@ body {
.bg-public {
background-image: url('../img/logo-epita-bw.png');
background-repeat: no-repeat;
background-size: cover;
background-size: contain;
height: 100vh;
}
.card-img-top {
@ -145,34 +146,37 @@ a:hover .teamname {
text-align: right;
}
.repeated-item.ng-enter,
.repeated-item.ng-leave {
transition-duration: 1s;
#eventsList {
overflow:hidden;
max-height: 100vh
}
.repeated-item.ng-enter {
opacity: 0;
transform: translateY(-1000px);
.swap-animation .alert {
margin-bottom: 0px;
}
.repeated-item.ng-enter.ng-enter-active {
.swap-animation {
margin-bottom: 0.5rem;
max-height: 25vh;
transition: max-height 1.5s linear,opacity 1.0s linear,transform 0.5s linear;
}
.swap-animation.ng-enter {
transform: translateY(-25vh);
max-height: 0vh;
}
.swap-animation.ng-enter-active {
opacity: 1;
transform: translateY(0px);
max-height: 30vh;
}
.repeated-item.ng-leave.ng-leave-active {
.swap-animation.ng-leave {
opacity: 1;
max-height: 30vh;
transform: translateY(0px);
}
.swap-animation.ng-leave-active {
opacity: 0;
}
.col-sm-8 .repeated-item.ng-leave.ng-leave-active {
transform: translateX(-800px);
}
.col-sm-4 .repeated-item.ng-leave.ng-leave-active {
transform: translateX(800px);
}
.repeated-item.ng-enter-stagger {
transition-delay: 0.7s;
transition-duration: 0s;
transform: translateX(120vw);
max-height: 0vh;
}
.carousel-indicators {