dashboard: improve animation
This commit is contained in:
parent
2daa04bb5f
commit
93519e5f62
3 changed files with 49 additions and 63 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
Reference in a new issue