Question

我试图使用calc在固定元素上设置宽度的动画，只是因为我不能使其相对。这是向下滚动时隐藏的导航栏之一，向上滚动时则显示在顶部的导航栏上。

由于某些原因，动画不流畅，“设置” div在过渡之间跳转。怪异的也许不是怪异的一点是，它在Chrome中可以正常运行，但在IE中却不行。

我知道在这里有一个具有计算宽度的div并不是最好的主意，但是由于它在滚动中不断消失，所以我不能使其相对。我花了数小时试图一无所获。尝试在IE中运行它，并将其与Chrome进行比较。

const sideMenu = document.querySelector('.side-menu');

sideMenu.addEventListener('click', function() {
  sideMenu.classList.toggle('collapse');
});

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.side-menu {
  width: 160px;
  height: 100vh;
  background-color: #ccc;
  transition: ease-in-out 0.3s;
  float: left;
  cursor: pointer;
}

.side-menu.collapse {
  width: 50px;
}

.side-menu.collapse + .right-panel > .top {
  width: calc(100% - 50px);
}

.right-panel {
  position: relative;
  background-color: yellow;
  display: flex;
  flex-direction: column;
}

.top {
  position: fixed;
  height: 70px;
  width: calc(100% - 160px);
  background-color: #c3c3c3;
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
}

.banner {
  width: calc(100% - 20vw);
}

.settings {
  width: 20vw;
  display: flex;
  justify-content: center;
}

<div class="side-menu">Click</div>

<div class="right-panel">
  <div class="top">
    <div class="banner">Banner</div>
    <div class="settings">Settings</div>
  </div>
</div>

Answer 1

我不确定IE为什么会出现这些口吃的问题，但是您可以简化布局以不使用calc，这似乎可以解决问题。

在使用fixed并希望覆盖页面的整个宽度时，可以使用calc()和left代替right。

例如在.top中，我们将calc(100% - 160px);更改为

right: 0;
left: 160px;

在.side-menu.collapse + .right-panel > .top

中

width: calc(100% - 50px);变为left: 50px;

const sideMenu = document.querySelector('.side-menu');

sideMenu.addEventListener('click', function() {
  sideMenu.classList.toggle('collapse');
});

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.side-menu {
  width: 160px;
  height: 100vh;
  background-color: #ccc;
  transition: ease-in-out 0.3s;
  float: left;
  cursor: pointer;
}

.side-menu.collapse {
  width: 50px;
}

.side-menu.collapse + .right-panel > .top {
  left: 50px;
}

.right-panel {
  position: relative;
  background-color: yellow;
  display: flex;
  flex-direction: column;
}

.top {
  position: fixed;
  height: 70px;
  right: 0;
  left: 160px;
  background-color: #c3c3c3;
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
}

.banner {
  width: calc(100% - 20vw);
}

.settings {
  width: 20vw;
  display: flex;
  justify-content: center;
}

<div class="side-menu">Click</div>

<div class="right-panel">
  <div class="top">
    <div class="banner">Banner</div>
    <div class="settings">Settings</div>
  </div>
</div>

宽度动画中的跳跃元素

1 个答案: