CODEWITHSUNDEEP
csshtml5-animation
Zemzela
Zemzela

Reputation: 3080

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.

Upvotes: 0

Views: 1491

Answers (1)

Jeroen
Jeroen

Reputation: 837

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.

Upvotes: 1

Related Questions