Question

我有这样的事情：

 <style>
     #submenu {
      background-color: #eee;
      height:200px;
  width:400px;
  opacity: 1;
      -webkit-transition: all 1s ease-in-out;
     }
    .doSomething {
      background-color: #fc3;
  -webkit-transform: rotate(360deg);
  visibility:collapse;
     } 
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
</head>


<body>
   <div id="submenu">`enter code here`
      <div style="background-color:black;width:50;height:50"></div>
   </div>
   <div style="background-color:yellow;height:250"></div>
   <script type="text/javascript">
    $(function(){
        $('#submenu').addClass('doSomething');
    });
</script>
</body>

问题是当第一个div完成动画时我想隐藏他和下面的div（黄色一个）取代他的位置。我试图把属性显示：无，但动画不会工作。

非常感谢任何帮助。

Answer 1

由于您的代码已经是特定于webkit的，因此您可以使用webkitTransitionEnd事件来了解动画何时结束。在该事件的处理程序中，您可以隐藏第一个div并显示第二个div。我写了一篇快速jsFiddle来证明这一点。

webkit转换后“隐藏”（display：none）div

1 个答案: