You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.1 KiB
61 lines
1.1 KiB
@mixin transition($time) {
|
|
will-change: transform;
|
|
transition: all ease $time;
|
|
}
|
|
|
|
@mixin transform($type) {
|
|
opacity: 0;
|
|
transform: $type;
|
|
}
|
|
|
|
.se {
|
|
&-fade-enter-active,
|
|
&-fade-leave-active {
|
|
@include transition(0.3s);
|
|
}
|
|
|
|
&-fade-enter-from,
|
|
&-fade-leave-to {
|
|
@include transform('');
|
|
}
|
|
|
|
&-fade-transform-enter-active,
|
|
&-fade-transform-leave-active {
|
|
@include transition(0.3s);
|
|
}
|
|
|
|
&-fade-transform-enter-from {
|
|
@include transform(translateX(-30px));
|
|
}
|
|
|
|
&-fade-transform-leave-to {
|
|
@include transform(translateX(30px));
|
|
}
|
|
|
|
&-slide-fade-enter-active,
|
|
&-slide-fade-leave-active {
|
|
@include transition(0.3s);
|
|
}
|
|
|
|
&-slide-fade-enter-from,
|
|
&-slide-fade-leave-to {
|
|
@include transform(translateX(30px));
|
|
}
|
|
|
|
&-slide-right-enter-active,
|
|
&-slide-right-leave-active,
|
|
&-slide-left-enter-active,
|
|
&-slide-left-leave-active {
|
|
@include transition(0.3s);
|
|
}
|
|
|
|
&-slide-right-enter-from,
|
|
&-slide-left-leave-to {
|
|
@include transform(translateX(-100%));
|
|
}
|
|
|
|
&-slide-left-enter-from,
|
|
&-slide-right-leave-to {
|
|
@include transform(translateX(100%));
|
|
}
|
|
}
|