对动态追加的 div 应用过渡

Question

祝

整个堆栈溢出社区白天或黑夜好！（特别是对于那些正在阅读本文😀的人）

• 问题是我有一个大容器。
• 在用户单击时，固定高度的几个div 会附加到其中。
• 这些div 中包含标头块和描述块。

最后，我需要他们的描述块进行转换：translateY（dynamicHeight），其中dynamicHeight是它们的高度值，它取决于标题块的高度（标题高度并非适用于所有项目。每个项目可能有自己的标题高度）。（整体div高度为200px，如果标题块高度为53px，则描述块应取其余147px）

$(function () {
  var itemsNumber = 4; //Say, I've got this number of items from a database.
  $("#btn").on("click", function () {
    for (i=0; i < itemsNumber; i++) {
      $("#container").append($("<div class="item" id=" + i + "><div class="moving"><div class="header">Hi! I'm header.</div><div class="description">Howdy. I am the content.</div></div></div>"));
    }
  });
});

#btn {
  background-color: green;
  color: black;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 16px;
  padding: 10px 30px;
 }
 
 #container {
  border: 1px solid #aaa;
  display: flex;
  justify-content: space-between;
  min-height: 150px;
  padding: 10px;
  width: 550px;
 }
 
 .item {
  border: 1px solid #999;
  height: 200px; 
  overflow: hidden;
  width: 120px;
 }
 
 .moving {
  transform: translateY(147px); /* Need to calculate this value using jQuery or vanilla JavaScript (itemHeight - headerHeight) but have no idea how to do it, because items are added dynamically.. */
  transition: transform .4s ease-in-out;
 }
 
 .item:hover .moving {
  transform: translateY(0);
 }
 
 .moving div {
  padding: 10px;
  text-align: center;
 }
 
 .header {
  background-color: red;
  height: 53px; /* This value isn't going be the same for each item */
  text-transform: uppercase;
 }
 
 .description {
  background-color: blue;
  color: white;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">Add tems</div>
<div id="container"></div> <!-- Items are added to this div -->

Answer 1

你可以

像这样计算动态高度$("#container").height() - $(".header").height();并使用此函数$(document).on("mouseenter", ".item", function()将悬停 evcent 绑定到动态创建的元素，如下所示

$(function() {
  var itemsNumber = 4; //Say, I've got this number of items from a database.
  $("#btn").on("click", function() {
    for (i = 0; i < itemsNumber; i++) {
      $("#container").append($("<div class="item" id=" + i + "><div class="moving"><div class="header" >Hi! I'm header.</div><div class="description" >Howdy. I am the content.</div></div></div>"));
    }
    var hei = $("#container").height() - $(".header").height();
    $(".moving").css("transform", "translateY(" + hei + "px)"); //translate using  dynamic height
    $(".description").css("height", hei-2+"px"); //set height of description dynamically
  });
  $(document).on("mouseenter", ".item", function() {
    $(this).find(".moving").css("transform", "translateY(0)");
    $(this).find(".moving").css("transition", " transform .4s ease-in-out");
  });
  $(document).on("mouseleave", ".item", function() {
    var hei = $("#container").height() - $(".header").height();
    $(this).find(".moving").css("transform", "translateY(" + hei + "px)");
    $(this).find(".moving").css("transition", " transform .4s ease-in-out");
  });
});

#btn {
  background-color: green;
  color: black;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 16px;
  padding: 10px 30px;
}
#container {
  border: 1px solid #aaa;
  display: flex;
  justify-content: space-between;
  min-height: 150px;
  padding: 10px;
  width: 550px;
}
.item {
  border: 1px solid #999;
  height: 200px;
  overflow: hidden;
  width: 120px;
}
.moving div {
  padding: 10px;
  text-align: center;
}
.header {
  background-color: red;
  height: 53px;
  /* This value isn't going be the same for each item */
  text-transform: uppercase;
}
.description {
  background-color: blue;
  color: white;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">Add tems</div>
<div id="container"></div>
<!-- Items are added to this div -->

附言还可以像这样动态设置description的高度$(".description").css("height", hei-2+"px");：-2px是每个1px item和container的边框