css - IE 无法正确显示侧边栏过渡

Question

我有一个侧边栏，它可以通过单击按钮展开和缩回。所有动画都是 css-transitions。在 Firefox 和 Chrome 中它可以工作，但(一如既往)IE 11 看起来不太好。这是因为菜单项中的文本在转换完成前一刻进入了第二行。 Here is the jsfiddle和片段(没有图标)。

$('#button').click(function() {
  $('.sidebaritem > span').css('width', '0px');
  $('.sidebaritem > span').css('padding-left', '0px');
  $('.sidebaritem > span').css('padding-right', '0px');
  $('.sidebar').css('width', '35px');
  $('.content').css('margin-left', '35px');
});
$('#button2').click(function() {
  $('.sidebaritem > span').css('width', '80%');
  $('.sidebaritem > span').css('padding-left', '5px');
  $('.sidebaritem > span').css('padding-right', '5px');
  $('.sidebar').css('width', '250px');
  $('.content').css('margin-left', '250px');
});

.sidebar {
  position: fixed;
  width: 250px;
  height: 100%;
  border: 1px solid #273238;
  background: #273238;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  display: inline-block;
  overflow: hidden;
}

.sidebaritem {
  cursor: pointer;
  height: 35px;
}

.sidebaritem:hover,
.sitebaritemhover {
  background: #212a2f;
}

.sidebaritem > * {
  display: inline-block;
  overflow: hidden;
  color: #AAA;
  padding: 0 5px 0px 5px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.sidebaritem > .fa {
  font-size: 20px;
}

.sidebaritem > span {
  color: #AAA;
  width: 80%;
  white-space: nowrap;
  line-height: 20px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.content {
  display: inline-block;
  margin-left: 250px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="sidebar noselect" id=sidebar>
  <div class="sidebaritem">
    <i class="fa fa-home fa-fw" aria-hidden="true"></i>
    <span>Item1</span>
  </div>
  <div class="sidebaritem">
    <i class="fa fa-bar-chart fa-fw" aria-hidden="true"></i>
    <span>Item2</span>
  </div>
  <div class="sidebaritem">
    <i class="fa fa-wrench fa-fw" aria-hidden="true"></i>
    <span>Item3</span>
  </div>
  <div class="sidebaritem">
    <i class="fa fa-cog fa-fw" aria-hidden="true"></i>
    <span>Item4</span>
  </div>
</div>
<div class="content">
  <h1>CONTENT</h1>
  <button id="button">-
  </button>
  <button id="button2">+
  </button>
</div>

有人能找到防止这种情况发生的方法吗？提前致谢。

Answer 1

在你的 js 脚本中改变这一行

$('#button').click(function() {
$('.sidebaritem > span').css('width', '0px');

到:

$('#button').click(function() {
$('.sidebaritem > span').css('width', '0%');

它应该可以工作。

这是片段:

$('#button').click(function() {
  $('.sidebaritem > span').css('width', '0%');
  $('.sidebaritem > span').css('padding-left', '0px');
  $('.sidebaritem > span').css('padding-right', '0px');
  $('.sidebar').css('width', '35px');
  $('.content').css('margin-left', '35px');
});
$('#button2').click(function() {
  $('.sidebaritem > span').css('width', '80%');
  $('.sidebaritem > span').css('padding-left', '5px');
  $('.sidebaritem > span').css('padding-right', '5px');
  $('.sidebar').css('width', '250px');
  $('.content').css('margin-left', '250px');
});

.sidebar {
  position: fixed;
  width: 250px;
  height: 100%;
  border: 1px solid #273238;
  background: #273238;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  display: inline-block;
  overflow: hidden;
}

.sidebaritem {
  cursor: pointer;
  height: 35px;
}

.sidebaritem:hover,
.sitebaritemhover {
  background: #212a2f;
}

.sidebaritem > * {
  display: inline-block;
  overflow: hidden;
  color: #AAA;
  padding: 0 5px 0px 5px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.sidebaritem > .fa {
  font-size: 20px;
}

.sidebaritem > span {
  color: #AAA;
  width: 40%;
  white-space: nowrap;
  line-height: 20px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.content {
  display: inline-block;
  margin-left: 250px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="sidebar noselect" id=sidebar>
  <div class="sidebaritem">
    <i class="fa fa-home fa-fw" aria-hidden="true"></i>
    <span>Item1</span>
  </div>
  <div class="sidebaritem">
    <i class="fa fa-bar-chart fa-fw" aria-hidden="true"></i>
    <span>Item2</span>
  </div>
  <div class="sidebaritem">
    <i class="fa fa-wrench fa-fw" aria-hidden="true"></i>
    <span>Item3</span>
  </div>
  <div class="sidebaritem">
    <i class="fa fa-cog fa-fw" aria-hidden="true"></i>
    <span>Item4</span>
  </div>
</div>
<div class="content">
  <h1>CONTENT</h1>
  <button id="button">-
  </button>
  <button id="button2">+
  </button>
</div>