防止 CSS 转换影响孩子

Question

我正在尝试将 CSS transform 属性应用于两个元素（Parent 和 child）但是问题是当我添加 transform 到 parent 那么它会影响 child 定位。

一个例子：

$('.dropdownToggler').click(function() {
  $('.dropdown').toggleClass('-isOpen')
});

$('.test').click(function() {
  $('.topbar').toggleClass('transform');
});

* {
  box-sizing: border-box;
}

.topbar {
  position: fixed;
  height: 45px;
  background: #333;
  top: 0;
  right: 0;
  left: 0;
  padding: 12px;
  color: #fff;
  /* remove comment below */
  /*transform: translateY(0);*/
}

.topbar.transform {
  transform: translateY(0);
}

.dropdown {
  background: #ddd;
  height: 100%;
  position: fixed;
  top: 45px;
  right: 0;
  left: 0;
  color: #333;
  /* main styles */
  transform: translateY(100%);
  transition: transform 300ms ease-in-out;
  will-change: transform;
}

.dropdown.-isOpen {
  transform: translateY(0%);
}

.test {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="topbar">
    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
    <button class="dropdownToggler">Open Menu</button>
    <button class="test">toggle `transform` to parent</button>
    <div class="dropdown">Notifications</div>
  </div>

</body>

</html>

当您将 transform: translateY(0); 添加到顶部栏 (Parent) 时，通知面板 (Child) 的定位将基于 parent。我正在努力阻止这种行为。

为了更流畅的动画，我用了transform，当然我们也可以用CSS top。有什么建议吗？感谢您抽出时间。

Answer 1

您可以以视口单位设置 .dropdown 的高度（100vh - topbar 的高度）

示例：

$('.dropdownToggler').click(function() {
  $('.dropdown').toggleClass('-isOpen')
});

$('.test').click(function() {
  $('.topbar').toggleClass('transform');
});

* {
  box-sizing: border-box;
}

.topbar {
  position: fixed;
  height: 45px;
  background: #333;
  top: 0;
  right: 0;
  left: 0;
  padding: 12px;
  color: #fff;
  /* remove comment below */
  /*transform: translateY(0);*/
}

.topbar.transform {
  transform: translateY(0);
}

.dropdown {
  background: #ddd;
  height: calc(100vh - 45px);
  position: fixed;
  top: 45px;
  right: 0;
  left: 0;
  color: #333;
  /* main styles */
  transform: translateY(100%);
  transition: transform 300ms ease-in-out;
  will-change: transform;
}

.dropdown.-isOpen {
  transform: translateY(0%);
}

.test {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="topbar">
    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
    <button class="dropdownToggler">Open Menu</button>
    <button class="test">toggle `transform` to parent</button>
    <div class="dropdown">Notifications</div>
  </div>

</body>

</html>

防止 CSS 转换影响孩子

Prevent CSS transform affects childs

css

css-transforms