在 webkit 转换后“隐藏”（显示：无）div答案

【问题标题】：after webkit transition "hide"(display:none) div在 webkit 转换后“隐藏”（显示：无）div
【发布时间】：2012-04-02 16:12:07
【问题描述】：

我有这样的事情：

 <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（黄色）来代替他。我试图把属性 display:none 但动画不起作用。

非常感谢任何帮助。

【问题讨论】：

标签： css html5-animation

【解决方案1】：

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

【讨论】：