mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-15 09:21:25 +08:00
169 lines
3.3 KiB
Plaintext
169 lines
3.3 KiB
Plaintext
.effect() {
|
|
animation-duration: 0.3s;
|
|
animation-fill-mode: both;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
.rc-cascader {
|
|
font-size: 12px;
|
|
&-menus {
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
position: absolute;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 6px;
|
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
|
|
white-space: nowrap;
|
|
|
|
&-hidden {
|
|
display: none;
|
|
}
|
|
|
|
&.slide-up-enter,
|
|
&.slide-up-appear {
|
|
.effect();
|
|
opacity: 0;
|
|
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
&.slide-up-leave {
|
|
.effect();
|
|
opacity: 1;
|
|
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
&.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
|
|
&.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
|
|
animation-name: SlideUpIn;
|
|
animation-play-state: running;
|
|
}
|
|
|
|
&.slide-up-enter.slide-up-enter-active&-placement-topLeft,
|
|
&.slide-up-appear.slide-up-appear-active&-placement-topLeft {
|
|
animation-name: SlideDownIn;
|
|
animation-play-state: running;
|
|
}
|
|
|
|
&.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
|
|
animation-name: SlideUpOut;
|
|
animation-play-state: running;
|
|
}
|
|
|
|
&.slide-up-leave.slide-up-leave-active&-placement-topLeft {
|
|
animation-name: SlideDownOut;
|
|
animation-play-state: running;
|
|
}
|
|
}
|
|
&-menu {
|
|
display: inline-block;
|
|
width: 100px;
|
|
height: 192px;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-right: 1px solid #e9e9e9;
|
|
overflow: auto;
|
|
&:last-child {
|
|
border-right: 0;
|
|
}
|
|
}
|
|
&-menu-item {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
padding: 0 16px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
&:hover {
|
|
background: tint(#2db7f5, 90%);
|
|
}
|
|
&-disabled {
|
|
cursor: not-allowed;
|
|
color: #ccc;
|
|
&:hover {
|
|
background: transparent;
|
|
}
|
|
}
|
|
&-loading:after {
|
|
position: absolute;
|
|
right: 12px;
|
|
content: 'loading';
|
|
color: #aaa;
|
|
font-style: italic;
|
|
}
|
|
&-active {
|
|
background: tint(#2db7f5, 80%);
|
|
&:hover {
|
|
background: tint(#2db7f5, 80%);
|
|
}
|
|
}
|
|
&-expand {
|
|
position: relative;
|
|
&:after {
|
|
content: '>';
|
|
font-size: 12px;
|
|
color: #999;
|
|
position: absolute;
|
|
right: 16px;
|
|
line-height: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes SlideUpIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(0.8);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
@keyframes SlideUpOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform-origin: 0% 0%;
|
|
transform: scaleY(0.8);
|
|
}
|
|
}
|
|
|
|
@keyframes SlideDownIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform-origin: 0% 100%;
|
|
transform: scaleY(0.8);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform-origin: 0% 100%;
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
@keyframes SlideDownOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform-origin: 0% 100%;
|
|
transform: scaleY(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform-origin: 0% 100%;
|
|
transform: scaleY(0.8);
|
|
}
|
|
}
|