Antd vue 点击下拉框会偏移然后闪烁

原创已于 2024-03-15 14:36:16 修改 · 1.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#anti-design-vue

于 2024-03-15 14:35:02 首次发布

文章讲述了在使用ANTD库时，下拉框和日期选择器的动画可能导致观感不佳，通过关闭动画效果可以解决闪动和位置调整问题，以提升用户界面的流畅性。

ANTD 下拉框点开都会有动画效果，所以会闪一下，再缩放自适应下，位置会闪一下缩放前位置再定位正确位置影响观感，所以关闭动画即可。

/* 日期选择框动画样式关闭 */
.ant-calendar-picker-container.slide-up-appear.slide-up-appear-active.ant-calendar-picker-container-placement-bottomLeft, .ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-bottomLeft {
  -webkit-animation-name: unset;
  animation-name: unset;
  -webkit-animation-duration: .05s;
  animation-duration: .05s;
}

.ant-calendar-picker-container.slide-up-appear.slide-up-appear-active.ant-calendar-picker-container-placement-topLeft, .ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-topLeft {
  -webkit-animation-name: unset;
  animation-name: unset;
  -webkit-animation-duration: .05s;
  animation-duration: .05s;
}

.ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-bottomLeft {
  -webkit-animation-name: unset;
  animation-name: unset;
  -webkit-animation-duration: .05s;
  animation-duration: .05s;
}

.ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-topLeft {
  -webkit-animation-name: unset;
  animation-name: unset;
  -webkit-animation-duration: .05s;
  animation-duration: .05s;
}
/* 滚动条动画样式关闭 */
.ant-select-dropdown.slide-up-appear.slide-up-appear-active.ant-select-dropdown-placement-bottomLeft, .ant-select-dropdown.slide-up-enter.slide-up-enter-active.ant-select-dropdown-placement-bottomLeft {
  -webkit-animation-name: unset;
  animation-name: unset;
  -webkit-animation-duration: .05s;
  animation-duration: .05s;
}

.ant-select-dropdown.slide-up-appear.slide-up-appear-active.ant-select-dropdown-placement-topLeft, .ant-select-dropdown.slide-up-enter.slide-up-enter-active.ant-select-dropdown-placement-topLeft {
  -webkit-animation-name: unset;
  animation-name: unset;
  -webkit-animation-duration: .05s;
  animation-duration: .05s;
}

.ant-select-dropdown.slide-up-leave.slide-up-leave-active.ant-select-dropdown-placement-bottomLeft {
  -webkit-animation-name: unset;
  animation-name: unset;
  -webkit-animation-duration: .05s;
  animation-duration: .05s;
}

.ant-select-dropdown.slide-up-leave.slide-up-leave-active.ant-select-dropdown-placement-topLeft {
  -webkit-animation-name: unset;
  animation-name: unset;
  -webkit-animation-duration: .05s;
  animation-duration: .05s;
}