如何调整大小&同时移动css分区

How to resize & move css divisions at same time?

本文关键字：amp 移动 分区 css 何调整 调整      更新时间：2023-09-26

我有一个除法，在这个除法中，我将在不同的实例中拥有动态数量的彩色块（也就是除法）。单击框后，我希望它们展开&覆盖整个屏幕。问题是，当盒子在膨胀时，它们在自己的位置上膨胀；没有在屏幕上移动。。我用过：

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

这很好，但我必须动态地放置块。我不能为单独的块编写动画，因为它们会有不同的大小。

您可以使用css3框架进行css3动画，只要您的要求是同意。。。

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

另外，您也可以尝试Move.js和Animate.css css3动画框架。。。

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

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

谢谢。。。

在痛苦的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";
}
相关文章：