Browse Source

style: revert menu animation easing functions (#27651)

pull/27792/head
偏右 4 years ago
committed by GitHub
parent
commit
8a3e271386
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 31
      components/menu/style/index.less

31
components/menu/style/index.less

@ -42,12 +42,12 @@
}
&-horizontal &-submenu {
transition: border-color 0.3s ease-in-out, background 0.3s ease-in-out;
transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out;
}
&-submenu,
&-submenu-inline {
transition: border-color 0.3s ease-in-out, background 0.3s ease-in-out,
padding 0.15s ease-in-out;
transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out,
padding 0.15s @ease-in-out;
}
&-submenu-selected {
@ -61,7 +61,7 @@
&-submenu &-sub {
cursor: initial;
transition: background 0.3s ease-in-out, padding 0.3s ease-in-out;
transition: background 0.3s @ease-in-out, padding 0.3s @ease-in-out;
}
&-item a {
@ -173,7 +173,8 @@
&-horizontal &-item,
&-horizontal &-submenu-title {
transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background 0.3s ease-in-out;
transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
background 0.3s @ease-in-out;
}
&-item,
@ -184,16 +185,16 @@
padding: @menu-item-padding;
white-space: nowrap;
cursor: pointer;
transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background 0.3s ease-in-out,
padding 0.15s ease-in-out;
transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
background 0.3s @ease-in-out, padding 0.15s @ease-in-out;
.@{iconfont-css-prefix} {
min-width: 14px;
margin-right: @menu-icon-margin-right;
font-size: @menu-icon-size;
transition: font-size 0.15s ease-out, margin 0.3s ease-in-out, color 0.3s ease-in-out;
transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out, color 0.3s @ease-in-out;
+ span {
opacity: 1;
transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out, color 0.3s ease-in-out;
transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out, color 0.3s @ease-in-out;
}
}
@ -246,7 +247,7 @@
background-color: @menu-bg;
border-radius: @border-radius-base;
&-submenu-title::after {
transition: transform 0.3s ease-in-out;
transition: transform 0.3s @ease-in-out;
}
}
@ -262,7 +263,7 @@
width: 10px;
color: @menu-item-color;
transform: translateY(-50%);
transition: transform 0.3s ease-in-out;
transition: transform 0.3s @ease-in-out;
}
&-arrow {
@ -273,8 +274,8 @@
height: 1.5px;
background-color: currentColor;
border-radius: 2px;
transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, top 0.3s ease-in-out,
color 0.3s ease-in-out;
transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out, top 0.3s @ease-in-out,
color 0.3s @ease-in-out;
content: '';
}
&::before {
@ -396,7 +397,7 @@
border-right: @menu-item-active-border-width solid @menu-highlight-color;
transform: scaleY(0.0001);
opacity: 0;
transition: transform 0.15s ease-out, opacity 0.15s ease-out;
transition: transform 0.15s @ease-out, opacity 0.15s @ease-out;
content: '';
}
}
@ -441,7 +442,7 @@
&::after {
transform: scaleY(1);
opacity: 1;
transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out;
transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out;
}
}

Loading…
Cancel
Save