0

我有一个部门，我将在各种情况下拥有动态数量的彩色块（也有部门）。单击该框时，我希望它们扩展并覆盖整个屏幕。问题是，当盒子在扩展时，它们在自己的位置扩展而不是在屏幕上移动。我用过：

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

这工作正常，但我必须动态放置块。我不能为单个块编写动画，因为它们的大小不同。

4

2 回答 2

0

只要您同意，您可以使用css3 框架进行 css3 动画...

也许你应该使用Anima.js，它是css3 + js 框架......

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

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

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

谢谢...

于 2013-06-25T05:34:49.967 回答
0

终于在痛苦的 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";
}
于 2013-06-25T12:33:13.410 回答