github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: Badge Animation enter and leave in RTL

pull/5820/head
tangjinzhou 2022-05-10 15:43:23 +08:00
parent 894a5b955c
commit 78045b4b5b
1 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/badge/style/rtl.less
View File

@ -6,7 +6,7 @@
&:not(&-not-a-wrapper) &-count,
&:not(&-not-a-wrapper) &-dot,
&:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
.@{badge-prefix-cls}-rtl & {
.@{badge-prefix-cls}-rtl& {
right: auto;
left: 0;
direction: ltr;
@ -30,6 +30,17 @@
}
}
}
&:not(&-not-a-wrapper).@{badge-prefix-cls}-rtl {
.@{badge-prefix-cls}-zoom-appear,
.@{badge-prefix-cls}-zoom-enter {
animation-name: antZoomBadgeInRtl;
}
.@{badge-prefix-cls}-zoom-leave {
animation-name: antZoomBadgeOutRtl;
}
}
}
.@{ribbon-prefix-cls}-rtl {
@ -65,3 +76,25 @@
}
}
}
@keyframes antZoomBadgeInRtl {
0% {
transform: scale(0) translate(-50%, -50%);
opacity: 0;
}
100% {
transform: scale(1) translate(-50%, -50%);
}
}
@keyframes antZoomBadgeOutRtl {
0% {
transform: scale(1) translate(-50%, -50%);
}
100% {
transform: scale(0) translate(-50%, -50%);
opacity: 0;
}
}