防止CSS变换影响孩子

问题描述 投票：0回答：1

我正在尝试将 CSS 

transform
属性应用于两个元素（父元素和子元素），但问题是当我将 
transform
添加到父元素时，它会影响子元素的定位。

示例：

$('.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);
添加到顶栏（父级）时，通知面板（子级）将基于父级定位。我正在努力阻止这种行为。

为了更流畅的动画，我使用了

transform
，当然，我们可以使用CSS
top
。有什么建议吗？感谢您投入时间。

css css-transforms
1个回答
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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.