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..

    How to edit a pseudo element on focus using css or jQuery

    How to reuse CSS selector?

    Ionic 2.0.0-beta.24 how can i import node_module css files without ionic.config.js

    CSS floats - how do I keep them on one line?

    jQuery: How to animate height change without known heights?

    How to reserve 'width' for a 'hide' element

    How to add composite css -webkit-mask-image?

    How can I position this drupal block?

    how to center and Crop an image to square with CSS

    How do I properly add a scrollbar to a jQuery Mobile popup using iScrollview?

    How to add more items to the list without going to the next row? [closed]

    How to borrow styles from another CSS rule

    How to apply css styles to dynamic JavaScript array?

    How to embed a php/javascript photogallery in a page of an html/css website?

    How to retain CSS transform scale on checked state

    CSS page headers - how to use print margins?

    How to create shaded divs like this with CSS

    GridView Non-Visible Row Showing up in Empty Data Row

    How to keep navigation tab remain unchanged

    How to hover a whole element to show details

    How can I embed a smartphone simulator in html5? [closed]

    How do I make link the highlight link conform to CSS shape

    How to apply css on one html file only

    css + thymeleaf - How to auto-adjust displayed screen size?

    jQuery - How to get elements height value and use it in another element via css code?

    How to get Bootstrap grid spans narrower than span1?

    How can I automatically highlight a specific character in link text using JQuery + CSS?

    Showing images in placeholder on focus

    CSS how to place an image to the right of variable width text on roll over?

    Css: how to combine table and column specification into a single selector?