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フレームワークを使用できます...

css3 + jsフレームワークであるAnima.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 に答える