mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-27 05:00:48 +08:00
261 lines
9.3 KiB
SCSS
261 lines
9.3 KiB
SCSS
@mixin fade-down-transition ($name: 'fade-down', $from-offset: -4px) {
|
|
&.#{$namespace}-#{$name}-transition-enter, &.#{$namespace}-#{$name}-transition-leave-to {
|
|
opacity: 0;
|
|
transform: translateY($from-offset);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-to, &.#{$namespace}-#{$name}-transition-leave {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave-active {
|
|
transition: opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-active {
|
|
transition: opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
}
|
|
|
|
@mixin fade-in-scale-up-transition ($name: 'fade-in-scale-up', $origin: inherit, $duration: .2s, $start-scale: 0.9, $original-transform: (), $original-transition: ()) {
|
|
&.#{$namespace}-#{$name}-transition-leave-active {
|
|
transform-origin: $origin;
|
|
transition: opacity $duration $--n-ease-in-cubic-bezier, transform $duration $--n-ease-in-cubic-bezier, $original-transition;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-active {
|
|
transform-origin: $origin;
|
|
transition: opacity $duration $--n-ease-out-cubic-bezier, transform $duration $--n-ease-out-cubic-bezier, $original-transition;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter, &.#{$namespace}-#{$name}-transition-leave-to {
|
|
opacity: 0;
|
|
transform: scale($start-scale) $original-transform;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave, &.#{$namespace}-#{$name}-transition-enter-to {
|
|
opacity: 1;
|
|
transform: $--n-transform-debounce-scale $original-transform;
|
|
}
|
|
}
|
|
|
|
@mixin fade-in-transition ($name: 'fade-in', $enter-duration: .2s, $leave-duration: .2s) {
|
|
&.#{$namespace}-#{$name}-transition-enter-active {
|
|
transition: all $enter-duration $--n-ease-in-out-cubic-bezier !important;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave-active {
|
|
transition: all $leave-duration $--n-ease-in-out-cubic-bezier !important;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter,
|
|
&.#{$namespace}-#{$name}-transition-leave-to {
|
|
opacity: 0;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-to,
|
|
&.#{$namespace}-#{$name}-transition-leave {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@mixin slide-in-from-right-transition ($name: 'slide-in-from-right', $duration: .3s, $leave-duration: .2s) {
|
|
&.#{$namespace}-#{$name}-transition-leave-active {
|
|
transition: transform $leave-duration $--n-ease-in-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-active {
|
|
transition: transform $duration $--n-ease-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-to {
|
|
transform: translateX(0);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter {
|
|
transform: translateX(100%);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave {
|
|
transform: translateX(0);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave-to {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
@mixin slide-in-from-top-transition ($name: 'slide-in-from-top', $duration: .3s, $leave-duration: .2s) {
|
|
&.#{$namespace}-#{$name}-transition-leave-active {
|
|
transition: transform $leave-duration $--n-ease-in-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-active {
|
|
transition: transform $duration $--n-ease-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-to {
|
|
transform: translateY(0);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter {
|
|
transform: translateY(-100%);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave {
|
|
transform: translateY(0);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave-to {
|
|
transform: translateY(-100%);
|
|
}
|
|
}
|
|
|
|
@mixin slide-in-from-bottom-transition ($name: 'slide-in-from-bottom', $duration: .3s, $leave-duration: .2s) {
|
|
&.#{$namespace}-#{$name}-transition-leave-active {
|
|
transition: transform $leave-duration $--n-ease-in-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-active {
|
|
transition: transform $duration $--n-ease-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-to {
|
|
transform: translateY(0);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter {
|
|
transform: translateY(100%);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave {
|
|
transform: translateY(0);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave-to {
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
|
|
@mixin slide-in-from-left-transition ($name: 'slide-in-from-left', $duration: .3s, $leave-duration: .2s) {
|
|
&.#{$namespace}-#{$name}-transition-leave-active {
|
|
transition: transform $duration $--n-ease-in-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-active {
|
|
transition: transform $duration $--n-ease-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-to {
|
|
transform: translateX(0);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter {
|
|
transform: translateX(-100%);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave {
|
|
transform: translateX(0);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave-to {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
@mixin fade-in-height-expand-transition (
|
|
$name: 'fade-in-height-expand',
|
|
$duration: .3s,
|
|
$original-transition: (),
|
|
$leave-delay: 0s,
|
|
$fold-padding: false
|
|
) {
|
|
&.#{$namespace}-#{$name}-transition-leave, &.#{$namespace}-#{$name}-transition-enter-to {
|
|
opacity: 1;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave-to, &.#{$namespace}-#{$name}-transition-enter {
|
|
opacity: 0;
|
|
@if $fold-padding {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave-active {
|
|
overflow: hidden;
|
|
transition:
|
|
max-height $duration $--n-ease-in-out-cubic-bezier $leave-delay,
|
|
opacity $duration $--n-ease-out-cubic-bezier $leave-delay,
|
|
margin-top $duration $--n-ease-in-out-cubic-bezier $leave-delay,
|
|
margin-bottom $duration $--n-ease-in-out-cubic-bezier $leave-delay,
|
|
padding-top $duration $--n-ease-in-out-cubic-bezier $leave-delay,
|
|
padding-bottom $duration $--n-ease-in-out-cubic-bezier $leave-delay,
|
|
$original-transition;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-active {
|
|
overflow: hidden;
|
|
transition:
|
|
max-height $duration $--n-ease-in-out-cubic-bezier,
|
|
opacity $duration $--n-ease-in-cubic-bezier,
|
|
margin-top $duration $--n-ease-in-out-cubic-bezier,
|
|
margin-bottom $duration $--n-ease-in-out-cubic-bezier,
|
|
padding-top $duration $--n-ease-in-out-cubic-bezier,
|
|
padding-bottom $duration $--n-ease-in-out-cubic-bezier,
|
|
$original-transition;
|
|
}
|
|
}
|
|
|
|
@mixin fade-in-width-expand-transition ($name: 'fade-in-width-expand', $duration: .2s, $delay: .1s) {
|
|
&.#{$namespace}-#{$name}-transition-leave-active {
|
|
transition: opacity $duration $--n-ease-in-out-cubic-bezier, max-width $duration $--n-ease-in-out-cubic-bezier $delay,
|
|
margin-left $duration $--n-ease-in-out-cubic-bezier $delay,
|
|
margin-right $duration $--n-ease-in-out-cubic-bezier $delay;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-active {
|
|
transition: opacity $duration $--n-ease-in-out-cubic-bezier $delay, max-width $duration $--n-ease-in-out-cubic-bezier,
|
|
margin-left $duration $--n-ease-in-out-cubic-bezier,
|
|
margin-right $duration $--n-ease-in-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-to {
|
|
opacity: 1;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter {
|
|
max-width: 0;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
opacity: 0!important;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave {
|
|
opacity: 1;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave-to {
|
|
max-width: 0 !important;
|
|
opacity: 0 !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
@mixin fade-up-width-expand-transition ($name: 'fade-up-width-expand', $duration: .2s) {
|
|
&.#{$namespace}-#{$name}-transition-leave-active {
|
|
transition: opacity $duration $--n-ease-out-cubic-bezier, max-width $duration $--n-ease-out-cubic-bezier, transform $duration $--n-ease-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-active {
|
|
transition: opacity $duration $--n-ease-out-cubic-bezier, max-width $duration $--n-ease-out-cubic-bezier, transform $duration $--n-ease-out-cubic-bezier;
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter-to {
|
|
opacity: 1;
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-enter {
|
|
max-width: 0!important;
|
|
opacity: 0;
|
|
transform: translateY(60%);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
&.#{$namespace}-#{$name}-transition-leave-to {
|
|
max-width: 0!important;
|
|
opacity: 0!important;
|
|
transform: translateY(60%);
|
|
}
|
|
}
|
|
|
|
@mixin icon-switch-transition (
|
|
$original-transform: (),
|
|
$left: 0,
|
|
$top: 0,
|
|
$transition: (all .3s $--n-ease-in-out-cubic-bezier !important)
|
|
) {
|
|
&.#{$namespace}-icon-switch-transition-enter, &.#{$namespace}-icon-switch-transition-leave-to {
|
|
/* make sure it apply to element */
|
|
transform: $original-transform scale(.75);
|
|
opacity: 0;
|
|
}
|
|
&.#{$namespace}-icon-switch-transition-enter-to, &.#{$namespace}-icon-switch-transition-leave {
|
|
transform: $--n-transform-debounce-scale $original-transform;
|
|
opacity: 1;
|
|
}
|
|
&.#{$namespace}-icon-switch-transition-leave-active, &.#{$namespace}-icon-switch-transition-enter-active {
|
|
transform-origin: center;
|
|
position: absolute;
|
|
left: $left;
|
|
top: $top;
|
|
transition: $transition;
|
|
}
|
|
} |