Javascript 设置集合中div的动画

我目前有一个对象（项目）列表，最初以div的形式呈现给用户，具有100px 200px的高度/宽度、绝对位置和左浮动。这个列表包含在angular ng repeat方法中（不确定这会对整个问题产生影响，但我想我会添加它，以防万一）。在特定的项目列表页面上可能有100个这样的div。目前，我有页面设置，所以如果你点击其中一个项目，它的详细信息会出现在一个模式对话框中。根据我的项目的要求，此功能很好，但我想通过添加动画来添加一些“umph”，该动画可执行以下操作：

1） 如果单击其中一个项目，该框将向上展开，以填充包含所有项目的父容器

2） 随着div的增长以填充空间，或者当它达到最大尺寸时，我想公开项目本身的细节。本质上，当项目未被选中时，它只是一个标题/描述。选中该选项后，项目div将全屏显示，显示其所有详细信息，并在div的全屏版本中显示其可编辑字段

3） 当用户关闭这个全屏div时，我希望它回到原始位置的原始状态

我只在这个项目中使用最新版本的Chrome，所以它不需要是跨浏览器的解决方案。我更愿意让动画尽可能接近纯css，并且更愿意不使用jquery

我目前没有css3动画的经验，但我有一本关于它的书，我希望最终能教我这方面的知识。然而，我想我会同时请求，以防有人能很快帮我解决问题，这样我就可以在满足功能的最后期限的同时使用此功能

---

提前谢谢

创建第二个CSS类，当它被选中时可以将其添加到div元素中，当它未被选中时可以将其删除。差不多

div {
    top: 100px;
    bottom: 200px;
    left: 100px;
    right: 300px;
    transition: all 1s; /* animate changes */
}

.active {
    top: 0px;
    bottom:0px;
    left: 0px;
    right: 0px;
}

.content {
    display: none; /* hide the content unless active */
}

.active .content {
    display: block; /* show the content when .active class is added */
}

---

确保父容器填充整个窗口，并将其自身设置为

positiion:absolute

或

position:relative

。在您进行的过程中，将有更多的细节需要解决，但这将为您提供一个开始的框架。然后，您可以根据需要使用JavaScript。

感谢您的指导！我试图做你所说的：对不起，不知道如何编辑之前的评论，但是：谢谢你的指导！我试图做你所说的：但是当我单击文档时，内容区域会按预期显示，但不会发生转换。当您单击“活动”类元素返回到原始“文档”类时，会发生转换。我是否错过了一个作业？我讨厌用评论轰炸这个作业，但我不知道如何删除以前的评论。无论如何，我已经让它正确地设置了动画（当它回到原始位置时有点起伏，我认为解决方案可能是错开动画，以便z索引最后发生），但是“documentArea”不会随着其中的文档数量而增长，所以在添加足够的文档之后，活动文档未涵盖所有文档。关于如何使文档区随着文档数量的增加而增长，您有什么想法吗？谢谢您的帮助@apostl3pol！我想我明白了。对于那些提到这个问题的人，我想到的是：我添加了粘滞条，因为我需要有过滤器来过滤掉总是可用的文档元数据。我现在要做的唯一一件事是错开动画，以便在返回到常规网格时，z索引不会更改，直到框的大小变为网格文档大小。这将有助于缓解所有网格项移动的问题。@JakeHova看起来不错！您还可以看看jQuery的函数。如果使用它来获取每个元素的x和y坐标，则可以将它们全部保持在

位置：绝对

，并仅使用

顶部

、

右侧

、

底部

和

左侧

CSS属性来设置动画。这样，它们在调整大小时就不会四处滑动，并且可以让它们从恰好位于的位置而不是左上角展开。此外，当重复引用同一DOM节点时，首先将其分配给变量会更快，即

$documentDiv=$（documentDiv）。干杯