Переход Css не работает в обратном направлении

#css #animation #css-animations

#css #Анимация #css-анимации

Вопрос:

Требование: Мне нужна плавная анимация, основанная на высоте элемента (которая определяется дочерним элементом)

Примечание: Пожалуйста, нажмите на элемент, чтобы развернуть

JSFiddle: https://jsfiddle.net/Lhmq0oqz/4 /

Что я пробовал: Структура элемента будет следующей

 document.querySelector('.parent').addEventListener('click', function(eve) {
  eve.currentTarget.className.indexOf('expand') == -1 ? eve.currentTarget.className = 'parent expand' : eve.currentTarget.className = 'parent';
});

 .parent {
  max-height: 200px;
  width: 400px;
  background-color: yellow;
  transition: max-height 1s ease;
  overflow: auto;
}
.child-wrap {
    width: 100%;
}
.child1 {
  width: 100%;
  background-color: green;
  transition: height 1s;
}

.child2 {
  height: 0px;
  width: 0px;
  background-color: red;
  transition: height 1s;
  
}
.parent.expand {
  max-height: 400px;
}
.expand .child-wrap{
  display:table
}
.expand .child2 {
  height: 100%;
  width: 30%;
  display: table-cell;
  
}
.expand .child1 {
  width: 70%;
  display: table-cell;
  
}
p {
  margin:0;
}

 <div class="parent">
  <div class="child-wrap">
    <div class="child1">
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
    </div>
    <div class="child2">
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
    </div>
  </div>
</div>

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

Проблема, с которой я сталкиваюсь: переход работает в одном направлении (свернуть, чтобы развернуть), но не в другом (развернуть, чтобы свернуть).

1. Знайте, что это не имеет никакого отношения к вопросу, но eve.currentTarget.classList.toggle(‘развернуть’); переключение намного лучше, чем оператор if 🙂

2. @AndrewBone Спасибо за информацию.. Я не знаю этого 🙂

3. возникла та же проблема, что и у вас, не уверен, почему

Ответ №1:

Вам также нужно будет добавить переход к элементу child2, поскольку это элемент, который выполняет переход

 .child2{
  height: 0px;
  width: 0px;
  background-color: red;
  transition:height 1s;
  }

jsFiddle

1. Спасибо за ответ.. Я попробовал решение, которое вы предоставили.. но это не работает в реальном месте.. итак, воссоздан сценарий с мельчайшими деталями. Пожалуйста, попробуйте это jsfiddle.net/Lhmq0oqz/4

Ответ №2:

Вы можете попробовать это, я только что добавил эффект перехода к вашим дочерним элементам css.

 .parent{
  max-height: 200px;
  width: 400px;
  background-color: green;
  transition: max-height 1s ease;
  display: flex;
  overflow:auto;
}
.parent.expand{
  max-height: 400px;
}
.child1{
  width: 70%;
  height: 100px;
-webkit-transition: all 2s; /* Safari */
   transition: all 2s;
}
.child2{
  height: 0px;
  width: 0px;
  background-color: red;
-webkit-transition: all 2s; /* Safari */
   transition: all 2s;
}
.expand .child2{
  height: 800px;
  width: 30%;
}

1. Спасибо за ответ.. Я попробовал решение, которое вы предоставили.. но это не работает в реальном месте.. итак, воссоздан сценарий с мельчайшими деталями. Пожалуйста, попробуйте это jsfiddle.net/Lhmq0oqz/4