Question

我有一个部门，在不同的情况下，我将拥有动态数量的彩色块（太分裂）。单击该框，我希望它们扩展＆amp;覆盖整个屏幕。问题是，虽然箱子正在扩大，但它们正在扩大自己的位置。没有在屏幕上移动.. 我用过：

.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%;
   }
}

这很好但我必须动态放置块。我不能为各个块编写动画，因为它们的大小不同。

Answer 1

根据您的要求是同意，您可以使用 css3框架进行css3动画 ...

可能你应该使用，Anima.js，它是 css3 + js framework ......

否则你也可以尝试Move.js和Animate.css css3动画框架......

Animate.css 是一个纯粹的css3动画框架......

注意： - 在使用之前检查css3动画的浏览器兼容性......

...谢谢

Answer 2

最后痛苦的4个小时后我得到了它。

这是动画的代码：

@-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%);
    }
}

这里是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部门？

2 个答案: