展开的时候慕慕客运文字会闪一下怎么处理?

Answer 1

曹雨sama 2024-02-15 22:01:54

虽然过了很久，可能你已经解决了这个问题，但我还是要回答一下，这个问题的原因，并非transition可以解决的，二是文字的宽度，没有固定，导致当sider组件宽度变化时，慕慕客运的span标签，宽度并非一蹴而就，而是随着sider组件的宽度增大，而慢慢增大，当宽度不足时，自然会显示两行，导致了闪烁一下的效果。解决方法很简单，就是基于这四个字的标签，一个最小宽度即可。

// 组件  
  {isFold ? '' : <div className='logo-text'> 慕慕货运 </div>}
  
  // css
    :global(.logo-text) {
    .size (@size: 18px, @color: #fff);
    cursor: pointer;
    min-width: 72px;
  }

Answer 2

前端小霸王 2023-11-17 10:17:33

给 logo把display flex取消了，然后加上overflow:hidden和

white-space: nowrap;

就可以了

Answer 3

河畔一角 2023-08-20 22:33:27

可以尝试用transition加个过渡动画，比如默认opacity为0，展开后为1，transition控制opacity的过度。