плавный рост div при добавлении детей с помощью переходов - PullRequest
Новая
       17

плавный рост div при добавлении детей с помощью переходов

0 голосов
/ 17 апреля 2019

Следующий код работает не так, как я ожидаю, несмотря на использование transition, поэтому может быть что-то, чего я не получаю в них.

В идеале, нажатие на кнопку добавит дочерний элементв id2 div и заставить id1 div расти плавно соответственно. 

$(function() {
  $("#id1 button").click(() => {
    $("#id2").append("<div class='child'>hehe</div>")
  });
});
#id1 {
  width: 100%;
  transition: all 2 ease;
}

.child {
  background-color: lemonchiffon;
  min-height: 50px;
  border: 1px solid rebeccapurple;
  margin: 10px 0px;
}

#id2 {
  padding: 20px;
  border: 2px solid blue;
  transition: all 0.5 ease;
}
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<div id='id1'>
  <button>click</button>
  <div id="id2"></div>
</div>

Ответы [ 2 ]

0 голосов
/ 17 апреля 2019

Я заставил это работать для вас . Я изменил анимацию на элемент, который вы добавляете. # id2 до .child

Используйте стили, используемые для нескольких случаев, в классах и , а не в идентификаторах , поскольку они должны быть уникальными. 

<div id='id1'>
  <button>click</button>
  <div id="id2"></div>
</div>

#id1 {
  width: 100%;
  transition: all 2 ease;
}

.child {
  background-color: lemonchiffon;
  min-height: 50px;
  border: 1px solid rebeccapurple;
  margin: 10px 0px;
  animation: animateElement linear .3s;
  animation-iteration-count: 1;
}

#id2 {
  padding: 20px;
  border: 2px solid blue;
}


@keyframes animateElement{
  0% {
    opacity:0;
    transform:  scaleY(0) translateY(-100%);
  }
  100% {
    opacity:1;
    transform:  scaleY(1) translateY(0%);
  }
}

$(function() {
  $("#id1 button").click(() => {
    $("#id2").append("<div class='child'>hehe</div>")
  });
});
0 голосов
/ 17 апреля 2019

При нажатии кнопки свойства CSS не изменяются, поэтому правильное поведение - не запускать переход CSS.

Создание #id2 плавного роста по мере добавления новых дочерних элементов, необходимо использовать какой-то другой механизм.

...