I wish to make some DIV's expand and take up the full screen when clicked on. . I cant just animate their height and width to 100% because this would only work if they are in the top left of the screen when clicked, if they are anywhere else they will end up partially off screen.
Would the following steps achieve the effect I want
1) Place the DIV inside a parent DIV (so that I can place absolute positioning on it as default) 2) When clicked
- change its position to fixed - animate i
Here's the trick to doing a hero transition. You need to use 3 elements. Not only will this eliminate any positioning problems, but it will allow you to transition to other things. Check out the animated gif. It's using hero transitions during page changes, which would be pretty hard to do using only 1 or 2 elements. You can play with it here…
http://blog.scottlogic.com/alee/assets/angular-hero/app/#/view1
Here's how it works. You have 2 anchor elements, which would be the