在集合中设置 div 动画

Question

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

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

2) 随着 div 增长到填充空间或当它完全变大时，我想公开项目本身的细节。本质上，当项目被取消选择时，它只是一个标题/描述显示。当它被选中时，项目 div 会全屏显示，显示它的所有详细信息，并在 div 的全屏版本中显示它的可编辑字段。

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

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

我目前没有 css3 动画方面的经验，但有一本关于它的书，我希望最终能教给我这方面的知识。但是，我想我会同时问一下，以防有人能尽快帮助我，这样我就可以把这个功能放进去，同时仍然满足我的功能截止日期。

提前致谢！

Answer 1

创建第二个 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 add or remove the .active class。