mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-24 12:45:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(badge): vanish transition

Browse Source
This commit is contained in:
07akioni 2019-12-06 17:05:40 +08:00
parent 3eb275c70b
commit 3888767959
2 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
styles/Badge.scss
View File

@ -97,6 +97,8 @@
@include m(as-is) {
display: inline-flex;
@include b(badge-sup) {
@include fade-in-scale-up-transition(badge, left bottom, $original-transform: translateX(0));
transform: translateX(0);
position: static;
}
}
@ -125,7 +127,7 @@
}
@include once {
@include b(badge-sup) {
@include fade-in-scale-up-transition(badge, left bottom);
@include fade-in-scale-up-transition(badge, left bottom, $original-transform: (translateX(-50%)));
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
color: white;
position: absolute;

6
styles/themes/vars.scss
View File

@ -250,7 +250,7 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
}
}
@mixin fade-in-scale-up-transition($block: 'fade-in-scale-up', $origin: inherit, $duration: .2s, $start-scale: 0.9) {
@mixin fade-in-scale-up-transition($block: 'fade-in-scale-up', $origin: inherit, $duration: .2s, $start-scale: 0.9, $original-transform: ()) {
&.#{$namespace}-#{$block}--transition-leave-active {
transform-origin: $origin;
transition: opacity $duration $slow-out-cubic-bezier, transform $duration $slow-out-cubic-bezier;
@ -261,11 +261,11 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
}
&.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
opacity: 0;
transform: scale($start-scale);
transform: scale($start-scale) $original-transform;
}
&.#{$namespace}-#{$block}--transition-leave, &.#{$namespace}-#{$block}--transition-enter-to {
opacity: 1;
transform: scale(1);
transform: scale(1) $original-transform;
}
}