74 lines
1.1 KiB
SCSS
74 lines
1.1 KiB
SCSS
// Animations
|
|
|
|
// slide-fade
|
|
.slide-fade-enter-active {
|
|
transition: all .3s cubic-bezier(.4, 0, .2, 1);
|
|
}
|
|
|
|
.slide-fade-leave-active {
|
|
transition: all .2s cubic-bezier(.4, 0, .2, 1);
|
|
}
|
|
|
|
.slide-fade-enter, .slide-fade-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
// Infobar
|
|
.infobar-enter-active {
|
|
animation: slideOutRight .2s reverse;
|
|
}
|
|
|
|
.infobar-leave-active {
|
|
animation: slideOutRight .2s;
|
|
}
|
|
|
|
html[dir=rtl] .infobar-enter-active {
|
|
animation: slideOutLeft .2s reverse;
|
|
}
|
|
|
|
html[dir=rtl] .infobar-leave-active {
|
|
animation: slideOutLeft .2s;
|
|
}
|
|
|
|
// Slide out right animation
|
|
@keyframes slideOutRight {
|
|
from {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
visibility: hidden;
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutLeft {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
to {
|
|
visibility: hidden;
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
// Bounce in animation
|
|
.fade-in-enter-active {
|
|
animation: fadeIn .2s;
|
|
}
|
|
|
|
.fade-in-leave-active {
|
|
animation: fadeIn .2s reverse;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|