3回答

曹雨sama

2024-02-15

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

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

1

0

前端小霸王

2023-11-17

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

white-space: nowrap;

就可以了

0

0

河畔一角

2023-08-20

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

0

0