javascript - 为一组中的 div 设置动画

Question

我目前有一个对象(元素)列表，这些对象(元素)最初以 div 的形式呈现给用户，它们具有 100 像素 x 200 像素的高度/宽度、绝对位置和向左浮动。这个列表包含在一个 Angular 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 */
}

确保父容器填满整个窗口并将其自身设置为 position: absolute 或 position: relative。随着你的进行，会有更多的细节需要解决，但这应该给你一个开始的框架。然后你可以 add or remove the .active class根据需要使用 JavaScript。