IE显示侧边栏过渡不正确

Question

我有一个侧边栏，该侧边栏可扩展和缩回按钮。所有动画都是CSS转换。在Firefox和Chrome中，它有效，但是(与往常一样(IE 11看起来不好。这是因为Menuitems中的文本在过渡结束之前瞬间闯入一排。和摘要(没有图标(。

$('#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');

to：

$('#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>