WebKit的过渡“隐藏”（显示：无）后格

我有这样的事情：WebKit的过渡“隐藏”（显示：无）后格

<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动画我想隐藏他，这是低于（黄格完成一）取代他的位置。我试图把属性显示：没有，但动画不会工作。

任何帮助是非常感谢。

来源

2012-03-29 Zemzela

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

来源

2012-04-02 08:12:07 Jeroen

WebKit的过渡“隐藏”（显示：无）后格

回答

相关问题