element ui导航栏折叠展开时出现空白区域解决办法

今天在使用elementUI做导航栏时,使用isCollapse控制导航栏展开和折叠时遇到了一个问题,就是在展开时因为aside区域的宽度值是一下子就从64px变成200px,导致导航栏区域的变化跟不上width的变化。因此就出现了上面这个情况,但是我在找解决方案的时候好像并没有什么好的答案,于是我就自己瞎折腾勉强解决了这个问题,可能不是太完美,你们可以参考一下。

首先看一下解决之前的情况

element ui导航栏折叠展开时出现空白区域解决办法_第1张图片

 

 

 之后使用了css3中过渡加转换的功能勉强达到效果。关键代码就一句,把它加入到导航栏的类选择器中就OK

element ui导航栏折叠展开时出现空白区域解决办法_第2张图片

 

transition: width 0.5ms, transform 0.2s;

 

你可能感兴趣的:(vue学习之路所遇问题,ui,elementui,vue.js)