0

Мне необходимо анимировать открытие/скрытие блока на подобии функций у JQuery show()/hide().

Высота блока определяется, относительно внутреннего содержимого, по этому я не могу анимироваться высоту через CSS: transition. Был вариант через JS изменять высоту, но так как элемент скрыт, то его высота равно 0 (cвойство offsetHeight), и по этому я не могу за ранее сохранить размеры элемента в переменную, что бы потом их использовать.

Пример на jQuery. Мне надо только уменьшение высоты.

$( "#click" ).click(function () {
	let elem = $("#elem");
	elem.toggleClass("open");
	elem.hasClass("open") ? elem.hide(1000) : elem.show(1000);
})
.main {
  height: 200px;
  background: #542;
}

#click {
  font-size: 20px;
  width: 100%;
  border: none;
  padding: 20px;
  cursor: pointer;
  display: block;
}

.height {
  height: 20px;
  background: #122;
  color: #fff;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>html-ready</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
</head>

<body class="page">
  <button id="click">Тронь меня</button>
  <main class="main" id="elem">
  </main>
  <div class="height">Првоерка высоты</div>
</body>

</html>

Мой кейс

"use strict";

(function() {
  function getElemClass(name) {
    return document.getElementsByClassName(name);
  }

  function getElemId(name) {
    return document.getElementById(name);
  }
  //Acordeon

  function addManyEvents(name, event) {
    let elements = getElemClass(name);
    for (let i = 0; i < elements.length; i++) {
      let attributesList = {
        attribute: "date-anchor",
        class: "accordion-wrap__open"
      };

      elements[i].addEventListener(event, function(e) {
        let self = this;
        let elementsList = {
          daughterElem: getElemId(self.getAttribute(attributesList.attribute)),
          switchClass: getElemClass(attributesList.class)[0]
        };

        function containsClass(elem) {
          return elem.classList.contains(attributesList.class);
        }

        function toggleClass(elem) {
          return elem.classList.toggle(attributesList.class);
        }

        if (containsClass(elementsList.daughterElem)) {
          toggleClass(elementsList.daughterElem);
        } else if (elementsList.switchClass) {
          toggleClass(elementsList.switchClass);
          toggleClass(elementsList.daughterElem);
        } else {
          toggleClass(elementsList.daughterElem);
        }
      })
    }
  }

  addManyEvents("accordion-wrap__title", "click");
}())
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
p,
figure,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

ul,
ol,
dl,
li,
menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

button {
  outline: none;
  border: none;
  padding: 0;
}

input,
select {
  outline: none;
  border: none;
}

a {
  text-decoration: none;
}

i {
  font-style: normal;
}

img {
  max-width: 100%;
  vertical-align: middle;
  border: none;
}

.title {
  text-align: center;
  margin-bottom: 30px;
  color: #fff;
}

.main {
  padding: 20px 0;
  background: #023;
}

.accordion-wrap {
  background: #532;
  padding: 20px;
}

.accordion-wrap__head {
  background: #96952a;
  text-align: center;
  font-size: 30px;
  border: 2px solid #135671;
}

.accordion-wrap__title {
  padding: 20px;
  display: block;
  color: #fff;
  cursor: pointer;
}

.accordion-wrap__body {
  display: none;
  overflow: hidden;
  padding: 20px;
  font-size: 20px;
  background: #fff;
  margin-left: 0;
  border-left: 2px solid #135671;
  border-right: 2px solid #135671;
}

.accordion-wrap__open {
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>html-ready</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
</head>

<body class="page">
  <main class="main">
    <h1 class="title">Accordion</h1>
    <dl class="accordion-wrap">
      <dt class="accordion-wrap__head">
				<span class="accordion-wrap__title" date-anchor="accordion-body-1">First</span>
			</dt>
      <dd id="accordion-body-1" class="accordion-wrap__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum maxime aliquam, voluptate odio iste. Recusandae quaerat quasi dolore libero, perspiciatis rem quae eos. Architecto placeat incidunt, neque corporis dignissimos</dd>
      <dt class="accordion-wrap__head">
				<span class="accordion-wrap__title" date-anchor="accordion-body-2">Second</span>
			</dt>
      <dd id="accordion-body-2" class="accordion-wrap__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum maxime aliquam, voluptate odio iste. Recusandae quaerat quasi dolore libero, perspiciatis rem quae eos. Architecto placeat incidunt, neque corporis dignissimos</dd>
      <dt class="accordion-wrap__head">
				<span class="accordion-wrap__title" date-anchor="accordion-body-3">Thirst</span>
			</dt>
      <dd id="accordion-body-3" class="accordion-wrap__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum maxime aliquam, voluptate odio iste. Recusandae quaerat quasi dolore libero, perspiciatis rem quae eos. Architecto placeat incidunt, neque corporis dignissimos</dd>
    </dl>
  </main>
</body>

</html>

Альтернативная ссылка на пример: Accordion

2
  • А почему бы не сделать в CSS @keyframe и вызывать его через JS при нажатии на объект(или при любом другом событии)?
    – DGDays
    15 сен 2020 в 7:45
  • Напишите свой аниматор на JS. Перед стартом сделайте show, посчитайте высоты, затем анимируйте от 0 до заданной высоты, в конце задайте высоту auto. Пример в ответе к этому вопросу: ru.stackoverflow.com/questions/1174578/… .
    – NoSkill
    19 янв 2021 в 10:42

1 ответ 1

0

Вообще, можно через transition анимировать max-height/min-height, для этого не подойдет display: none;, но с помощью max-height: 0; overflow: hidden; можно имитировать.

Не уверен, что то что нужно, но как вариант:

const button = document.querySelector('[data-js="spoilerToggle"]');
const spoilerToggle = e => {
  const spoiler = document.querySelector(`[data-js="spoiler"][data-targetId="${e.target.dataset.targetid}"]`);
  const spoilerContentHeight = spoiler.children[0].clientHeight;
  
  spoiler.style.maxHeight = `${spoilerContentHeight}px`;
  
  spoiler.classList.toggle('open');
  clearTimeout(animationTimeout);
  
  if (spoiler.classList.contains('open')) {
    animationTimeout = setTimeout(() => {
      spoiler.style.maxHeight = 'none';
    }, 1000);
  }
  else {
    animationTimeout = setTimeout(() => {
      spoiler.style.maxHeight = 0;
    }, 0);
  }
}
let animationTimeout = null;

button.addEventListener('click', spoilerToggle);
.spoiler {
  overflow: hidden;
  max-height: 0;
  transition: max-height 1s;
}

.spoiler__content {
  height: 100px;
  background-color: green;
}
<button data-js="spoilerToggle" data-targetId="1">Toggle</button>
<div class="spoiler" data-js="spoiler" data-targetId="1">
  <div class="spoiler__content"><div>
</div>

3
  • Вместо setTimeout, можно использовать событие transitionend. Я знаю, что max/min-height анимируется, но дело в том, что высоту блока формирует внутренний контент, а не я пишу эту высоту. Можно схитрить, и анимировать через min-height, но проблема в том, что я не знаю какую именно высоту писать, а если написать больше, то часть анимации будет заморожена, ибо отчет будет идти от заданного значения. 28 сен 2018 в 0:44
  • @ВиталикЧерный, у transitionend с поддержкой все не очень хорошо. Неизвестность высоты контента учтена в данном решении, js задает высоту для .spoiler беря за основу высоту .spoiler__content (который скрыт), после завершения анимации задается max-height: auto; для адаптивности (по сути так же работает и .hide, .show, только добавляется ещё состояние display: none; и изменение ширины блока - но судя по поставленной задаче это не требуется). 28 сен 2018 в 3:44
  • ты видел мой контекст? получается, мне надо создать лишнюю обертку, что бы анимировать высоту? В твоем кейсе можно использовать обычный height, так как ты проценты не используешь, то она тоже будет анимироваться. 28 сен 2018 в 5:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.