0

I currently have a list of objects (projects) that are presented to the user initially as div's that have have a 100px x 200px height/width, position absolute, and float left. This list is contained within an angular ng-repeat method (not sure that makes a difference in the overall question but figured I'd add it in just in case it does). There could be 100s of these divs on the particular project listing page. Currently, I have the page setup so that if you click one of the projects, it's details come up in a modal dialog box. This functionality is fine per the requirements for my project but I'd like to add some "umph" to it by adding in an animation that does the following:

1) If you click on one of the projects, the box expands up to fill the parent container that contains all the projects

2) As the div grows to fill the space or when it's full sized, I want to expose the details of the project itself. Essentially, when the project is unselected, it's just a title/description showing. When it is selected, the project div goes full screen, exposes all of it's details, and shows it's editable fields in the full screen version of the div.

3) When the user closes that full screen div, I'd like it to go back to it's original state in it's original position.

I'm only using the latest version of Chrome for this project so it doesn't need to be a cross browser solution. I'd prefer to keep the animation as close to pure css as possible and would prefer to leave jquery out of it.

I currently have no experience with css3 animations but got a book on it that I hope can teach me about this eventually. However, I figured I would ask in the mean time in case someone can help me out soon so I can put this functionality in while still meeting my deadline for the functionality.

Thanks in advance!

JakeHova
  • 1,189
  • 2
  • 15
  • 36

1 Answers1

1

Create a second CSS class that can be added to your div element when it is selected, and removed when it is not. Something like

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 */
}

Make sure that the parent container fills the entire window and is itself set to positiion: absolute or position: relative. There will be a lot more details to work out as you go, but that should give you a framework to get started. You can then add or remove the .active class as needed with JavaScript.

Community
  • 1
  • 1
apostl3pol
  • 874
  • 8
  • 15
  • Thanks for your guidance! I attempted to do what you are talking about: http://jsfiddle.net/n7pmz3ng/ – JakeHova Nov 19 '14 at 20:30
  • Sorry, no idea how to edit a previous comment but:Thanks for your guidance! I attempted to do what you are talking about: http://jsfiddle.net/n7pmz3ng/ but when I click the document the content area shows up as expected, but no transitions occur. A transition occurs when you click the "active" class element back to the original "document" class. Am I missing an assignment? – JakeHova Nov 19 '14 at 20:42
  • I hate bombarding this with comments, but I do not know how to delete previous comments. Anyhow, I have it animating properly (it is a little choppy when it goes back to it's original position, I think the solution might be to stagger the animation so that z-index happens last), but the "documentArea" does not grow with the amount of documents that are in it, so after enough documents are added, the active document doesn't cover all of the documents. Any thoughts on how to make the documentArea grow with the number of documents in it? – JakeHova Nov 19 '14 at 21:13
  • Thanks for your help @apostl3pol! I think I figured it out. For those referencing this question, this is what I came up with: http://jsfiddle.net/jakehova/kfq63qto/ I added the sticky bar because I need to have filters that filter out document metadata that's always available. The only thing that I want to do now is stagger the animations so that on return back to the regular grid, the z-index isn't changed until the size of the box goes to the grid document size. That should help alleviate the issue with all the grid items moving around. – JakeHova Nov 20 '14 at 16:26
  • @JakeHova Looks good! You might also take a look at jQuery's [position](http://api.jquery.com/position/) function. If you use it to get the x and y coordinates of each element, you can keep them all at `position: absolute` and animate using only the `top`, `right`, `bottom`, and `left` CSS properties. Then they wouldn't slide around when resizing, and could have them expand from wherever they happen to be located rather than the top left corner. Also, when repeated referencing the same DOM node, it will be faster to assign it to a variable first, i.e. `$documentDiv = $(documentDiv);`. Cheers! – apostl3pol Nov 20 '14 at 21:01