How to resize & move css divisions at same time?


Tags: javascript,html,css,css3,animation

Problem :

I have a division in which i'll be having dynamic numbers of colorful blocks(that too divisions) at various instances. On clicking the box, i want them to expand & cover whole screen. the problem is, while boxes are expanding, they are expanding at there own position & not shifting in the screen.. I used:

.elemented1 {
   width: 100%;
   height: 100%;
   -webkit-animation: elemen1 0.3s;
   border: 0px;
}

@-webkit-keyframes elemen1 {

   from {
      width: 49.6%;
      height: 39.6%;
   }

   to {
      width: 100%;
      height: 100%;
   }
}

This is working fine but i have to put blocks dynamically. I cant write animations for individual blocks as they will be of different sizes.



Solution :

Finally after painful 4 hours i got it.

This is the code for animation:

@-webkit-keyframes animateExpansion
{
    from 
    {
    width:49.6%;
    height:49.6%;
    left: attr(left %);
    top: attr(top %);
    -webkit-transform:translate(0%,0%);
    }

    to 
    {
    width:100%;
    height:100%;
    left: 0%;
    top: 0%;
    -webkit-transform:translate(0%,0%);
    }
}

and here goes javascript:

function onLayoutClick(){

            var style = window.getComputedStyle(this);
            var this_Top=(style.getPropertyValue('top'));
            var this_Left= (style.getPropertyValue('left'));

            this.setAttribute("style","border:0px;width:100%;height:100%;-webkit-transform:translate(-"+this_Left+",-"+this_Top+");-webkit-animation:animateExpansion 0.5s ease-in-out");
            var layouts = document.getElementsByClassName("layouts");
            for( i = 0 ;i<layouts.length; i++ )
            {
                layouts[i].style.zIndex="-1";
            }

            this.style.zIndex="0";
}

    CSS Howto..

    JavaFX How to change color of dialog/window title?

    How to resize button without cutting the text inside

    How to convert an element css to JSON? [duplicate]

    how to swap div with one another in mobile view css

    How to modify a WordPress post's markup? [closed]

    How to force division into equal parts using flexbox

    How to call css into div class inner div class? [closed]

    How to read minified CSS?

    How to have a background image properly fade in with CSS

    How to Make Tabs In CSS?

    How to make the contents of an HTML table fit within their cells?

    How to set CSS width so that the element will have the exact window width?

    How to display only the
      that has a selected
    • in it, including all of the
    • s in that parent ul, not just the selected ones?

    How to add media='screen' in css using cakePHP?

    How can I position an element in the middle of the window while using position: absolute?

    How to Prevent My CSS From Clashing With Facebook's CSS?

    How do I get my header to align with my navigation bar at the center of my page?

    How to vertically align html radio buttons with CSS-only in this code?

    How to make jQuery target and attach a plugin call to hundreds of CSS ID's with an ID number at the end of them?

    how to set a div to the bottom side in asp.net css

    How to set CSS3 transition using javascript?

    How can I get this effect (on height) with jquery?

    How to make a pure css based dropdown menu?

    How to force my text to not break into lines in css?

    CSS - How do I center a loading icon on a page that contains an iframe?

    How to Obtain Contents of HTML Element in CSS

    How to correct div overlapping the title

    Why Does the

    tag creates a black background here? and how do I get rid from the border?

    How to find Sharepoint 2013 CSS Classes?

    how to use .css to add an address to the end of every .html page?