javascript - 动画不工作

Question

我想创建一个页面，点击它会从页面右侧打开一个 div。开场由动画完成。 当我从右边打开一个 div 时，我希望 div 将被扩展并且全部由动画， 我写

<button onclick="Animation();">click</button>

<Div> 
    <Table style="float:right">
        <tr>
            <td> 
                <div id="dummy" style="height:0"> 
                </div>
            </td>
        </tr>
        <tr>

            <td>
                <div>
                list view 1
                </div>
            </td>
            <td>
                <div>
                list view 2
                </div>
            </td>
            <td>
                <div>
                list view 3
                </div>
            </td>

             <td> 
                <div id="dummy1">right </div>
            </td>
        </tr>
    </Table>
</div>

  function Animation() {

            var right_div = jQuery("#dummy1");
            right_div.first().addClass("bounceInRight");
        }

     .bounceInRight 
{
 width:80px;
    background:yellow;
     -webkit-animation: bounceInRight 5s; /* Chrome, Safari, Opera */
    animation: bounceInRight 5s;
}


   @-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

但是首先div被展开并且动画是act，我怎样才能同时进行呢？作为动画的一部分，div 会更大

Answer 1

最好的选择可能是使用粉底。这是一个很棒的框架，我认为它提供了您正在寻找的东西以及我认为非常有用的其他工具。

如果您不想使用框架，那完全可以理解，但我建议您使用 Foundation。

看看它提供的内容，它将使网页设计变得更加简单:)