Предотвратить влияние CSS-преобразования на детей - PullRequest
Новая
       6

Предотвратить влияние CSS-преобразования на детей

0 голосов
/ 23 мая 2018

Я пытаюсь применить свойство 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); на верхнюю панель (Родитель), тогда панель уведомлений (Дочерний) позиционируется на основе родительского элемента.Я пытаюсь предотвратить это поведение.

Для более плавной анимации я использую tranfsorm, конечно, мы можем использовать CSS top.Любое предложение?Спасибо, что уделили время.

1 Ответ

0 голосов
/ 23 мая 2018

Вы можете установить высоту .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>
...