Может ли CSS обнаруживать, перемещать и HTML-элемент при наличии удаленного дочернего класса? - PullRequest
Новая
       45

Может ли CSS обнаруживать, перемещать и HTML-элемент при наличии удаленного дочернего класса?

0 голосов
/ 09 ноября 2019

Попытка переместить внеэкранную панель на экран в зависимости от наличия дочернего селектора CSS (добавляется / удаляется динамически).

Что я делаю не так? TIA

Сценарий:

Внеэкранная панель .details с правилом CSS для отслеживания дочернего селектора .finished-loading. Когда присутствует дочерний селектор (загружается динамически через взаимодействие с конечным пользователем), CSS-правило панели становится истинным, и панель .details скользит по экрану.

Пример::

CSS: 

body .details {margin-right: -300px;} /* .details panel is closed */
body.show-details .details .finished-loading {margin-right: 0;} /* conditions on opening the .details panel */

HTML: 

<body class=".show-details">
<div class="wrapper">
  <div class="details">
    <!-- any number of nested elements -->
    <div>
      <div>
        <p>Dynamically loaded content</p>
        <p class="finished-loading">Dynamically loaded content</p> <!-- .finished-loading triggers CSS rule -->
      </div>
   </div>
  </div>
</div>
</body>

1 Ответ

0 голосов
/ 09 ноября 2019

Так много ошибок ...

  1. Добавьте класс для управления полем для подробного div или тела

  2. Не использовать маржу, используйте transform - он обрабатывается после того, как html-движок выполнил позиционирование / layoutig, и при использовании переходов создаст более приятную анимацию.

  3. имена классов не должны иметь точек в любой позиции 

<body>
<div class="wrapper">
  <div class="details finished-loading">
    <!-- any number of nested elements -->
    <div>
      <div>
        <p>Dynamically loaded content</p>
        <p>Dynamically loaded content</p>
      </div>
   </div>
  </div>
</div>
</body>

.details {transition: transform .5s ease;}
.details:not(.finished-loading) {transform: translateX(300px);}

В примере используется псевдокласс отрицания (: not), поэтому код немного короче. Вы также можете сделать это так, чтобы было легче понять, но больше кода: 

.details {transition: transform .5s ease;transform: translateX(300px);}
.details.finished-loading {transform: translateX(0);}

Редактировать:

Некоторое объяснение, почему вам нужно добавить класс вdiv деталей или тело:

В настоящее время невозможно выбрать элемент с помощью дочернего ограничения (кроме: пусто).

...