Question

我目前有一个对象（项目）列表，这些对象最初显示为具有100px x 200px高度/宽度，位置绝对值和向左浮动的div。这个列表包含在一个角度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。随着时间的推移会有更多细节可以解决，但这应该会为您提供一个入门框架。然后，您可以根据需要add or remove the .active class使用JavaScript。

动画集合中的div

1 个答案: