ant design vue pro 中的滚动条和动画

左主体的右阴影

box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);

header的下阴影

box-shadow: 0 1px 4px rgb(0 21 41 / 8%);

滚动条

菜单的滚动条美化

&::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

&::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .12);
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgb(0 21 41 / 5%);
}

&::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .06);
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgb(0 21 41 / 5%);
}

drawer的展开/收缩动画

默认

position: absolute;
right: 0;
width: 300px;
transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), box-shadow 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), -webkit-box-shadow 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);

展开/收缩, 就是动态添加如下的transform属性

transform: translateX(100%);

菜单的展开与收缩

注意菜单整体的展开与收缩是通过改变菜单的实际宽度实现的，这一点和drawer是不同的

transition: all 0.2s;

logo和系统名称的展开与收缩

疑问 这个是aside元素的css，为什么能够实现在min-width比较小的时候隐藏元素, min-width比较大的时候又显示元素呢?

flex: 0 0 200px;
max-width: 256px;
min-width: 212px;
width: 162px;