Search code examples
csshtml5-animation

after webkit transition "hide"(display:none) div

I have something like this:

 <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>

The problem is when first div finishes with animation I want to hide him and the div which is below(yellow one) to take his place. I tried to put property display:none but animation wont work.

Any help is highly appreciate.

Solution

  • Since your code is already webkit specific, maybe you can use the webkitTransitionEnd event to know when the animation ends. In the handler for that event you can hide the first div and display the second. I have written a quick jsFiddle to demonstrate this.