Попытка анимировать список определений отображения / скрытия со скрытым атрибутом (скрытый атрибут приводит к тому, что анимация не работает) - PullRequest
Новая
       31

Попытка анимировать список определений отображения / скрытия со скрытым атрибутом (скрытый атрибут приводит к тому, что анимация не работает)

0 голосов
/ 16 января 2019

Я строю доступный аккордеон, используя список определений.У меня это хорошо работает, где <dt> содержит <button>, который при нажатии переключает aria-expanded из true / false и переключает атрибут hidden в соответствующем <dd>.Существуют и другие вещи для обеспечения доступности, но это основы для списка и отображения / скрытия.

Отображение / скрытие dd затем управляется скрытым селектором атрибутов (в данном случае этоисходит из таблицы стилей начальной загрузки): 

[hidden] {
  display: none!important;
}

Функциональность show / hide сейчас представляет собой сложное шоу / скрытие, и я пытаюсь добавить хорошую анимацию с помощью CSS-переходов (это должно работать в IE11где переходы поддерживаются.)

Я создал простой POC для анимации в http://jsfiddle.net/jokvqy6u/, который просто переключает классы show и hide.Это было просто то, что я мог быстро собрать вместе и отправить нашей маркетинговой команде, чтобы проиллюстрировать анимацию и получить обратную связь.

Я думал, что смогу легко добавить селекторы hidden и :not(hidden)в POC, и все будет работать нормально, тогда я смогу перестроиться в настоящий аккордеон, но анимация, похоже, не работает с атрибутами hidden в html.Вы можете увидеть демонстрацию этого в http://jsfiddle.net/6zmdhqrn/2/, где 2-й элемент анимируется, потому что у него нет атрибута hidden.Элементы 1 и 3 имеют атрибуты hidden и даже не открываются.

Кто-нибудь знает, почему это происходит и как я могу заставить мои переходы работать с атрибутами hidden?

EDIT Я наполовину работал на http://jsfiddle.net/6zmdhqrn/3/, переопределив селектор [hidden], полученный из начальной загрузки, некоторыми важными утверждениями.У меня все еще тяжелое шоу, но шкура скользит вверх.Я подозреваю, что это связано с элементом display:none, где анимация не имеет измерений / информации, с которой можно начинать анимацию?Все еще ищу информацию / советы о том, как получить начальную анимацию.

1 Ответ

0 голосов
/ 16 января 2019

Вы правильно догадались, проблема в том, что display не является анимируемым свойством CSS.

Вы должны основывать анимацию на анимируемом свойстве, например opacity.

Вот короткая демонстрация: 

const el = document.querySelector('div');

document.querySelector('button').addEventListener('click', () => {
  if (el.classList.contains('visible'))
    el.classList.remove('visible');
  else
    el.classList.add('visible');
})
div {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.visible {
  opacity: 1;
}
<div class="visible">some content!</div>
<button>toggle visibility</button>

Как вы, возможно, заметили, установка непрозрачности на 0 не скрывает элемент полностью (т.е. он все еще занимает место). В случае, если это что-то нежелательно, вы можете рассмотреть анимацию другого свойства, такого как ширина или высота.

...