Mamalizz
105 lines
1.8 KiB
CSS
105 lines
1.8 KiB
CSS
/*
|
|
Zoom animation
|
|
*/
|
|
|
|
.zoom-leave-active,
|
|
.zoom-enter-active {
|
|
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.zoom-enter-to,
|
|
.zoom-leave-from {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0px);
|
|
}
|
|
|
|
.zoom-enter-from,
|
|
.zoom-leave-to {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(15px);
|
|
}
|
|
|
|
/*
|
|
Fade animation
|
|
*/
|
|
|
|
.fade-leave-active,
|
|
.fade-enter-active {
|
|
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.fade-enter-to,
|
|
.fade-leave-from {
|
|
opacity: 1;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
/*
|
|
FadeDown animation
|
|
*/
|
|
|
|
.fade-down-leave-active,
|
|
.fade-down-enter-active {
|
|
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.fade-down-enter-to,
|
|
.fade-down-leave-from {
|
|
opacity: 1;
|
|
transform: translateY(0px) scale(1);
|
|
}
|
|
|
|
.fade-down-enter-from,
|
|
.fade-down-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(10px) scale(0.95);
|
|
}
|
|
|
|
/*
|
|
FadeRightToLeft animation
|
|
*/
|
|
|
|
.fade-right-to-left-leave-active,
|
|
.fade-right-to-left-enter-active {
|
|
transform-origin: bottom right;
|
|
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.fade-right-to-left-enter-to,
|
|
.fade-right-to-left-leave-from {
|
|
opacity: 1;
|
|
transform: translateX(0px) scale(1);
|
|
}
|
|
|
|
.fade-right-to-left-enter-from,
|
|
.fade-right-to-left-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(30px) scale(0.95);
|
|
}
|
|
|
|
/*
|
|
FadeRight animation
|
|
*/
|
|
|
|
.fade-right-leave-active,
|
|
.fade-right-enter-active {
|
|
transform-origin: right;
|
|
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.fade-right-enter-to,
|
|
.fade-right-leave-from {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.fade-right-enter-from,
|
|
.fade-right-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|