Question

尽管使用了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>

Answer 1

按下按钮时，CSS属性没有更改，因此，不触发任何CSS过渡是正确的行为。

随着添加新的子项，使#id2平稳增长，必须使用其他机制。

Answer 2

I made it work for you。我将动画更改为要添加的元素。 ＃id2 到 .child

在班级和不在ID 上使用用于多种情况的样式，因为它们应该是唯一的。

<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>")
  });
});

使用过渡追加孩子时，div的平滑增长

2 个答案: