为动态附加的 div 应用过渡

Question

祝整个 stackoverflow 社区早日晚安！ （尤其是那些正在阅读这篇文章的人？？？？）

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

最后我需要他们的描述块有transform: 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() 将悬停事件绑定到像这样动态创建的元素

$(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 上的每个1px 的边界