83 lines
No EOL
1.3 KiB
SCSS
83 lines
No EOL
1.3 KiB
SCSS
.slide-enter-active,
|
|
.slide-leave-active,
|
|
.slide-right-enter-active,
|
|
.slide-right-leave-active,
|
|
.slide-left-enter-active,
|
|
.slide-left-leave-active {
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.slide-enter-from,
|
|
.slide-leave-to {
|
|
opacity: 0;
|
|
transform: translate(0, -10px);
|
|
}
|
|
|
|
.slide-right-enter-from,
|
|
.slide-right-leave-to {
|
|
opacity: 0;
|
|
transform: translate(10px, 0);
|
|
}
|
|
|
|
.slide-left-enter-from,
|
|
.slide-left-leave-to {
|
|
opacity: 0;
|
|
transform: translate(-10px, 0);
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.bounce-enter-active {
|
|
animation: bounce-in 0.5s ease;
|
|
}
|
|
|
|
@keyframes bounce-in {
|
|
0% { transform: scale(0);}
|
|
50% { transform: scale(1.25);}
|
|
100% {transform: scale(1);}
|
|
}
|
|
|
|
.list-move,
|
|
.list-enter-active,
|
|
.list-leave-active {
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.list-enter-from,
|
|
.list-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
|
|
.list-leave-active {
|
|
position: absolute;
|
|
width: 0%;
|
|
left: 50%;
|
|
top: 100%;
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
@each $size in (200, 1000) {
|
|
.expand-#{$size} {
|
|
&-enter-active,
|
|
&-leave-active {
|
|
transition: max-height 0.3s ease-in-out, opacity 0.2s ease;
|
|
max-height: #{$size}px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&-enter-from,
|
|
&-leave-to {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
} |