0

Is there any way how to run some specific JavaScript code when CSS 3 transition ends?

For instance I need scale one div from 0 to 1 in y-axis and than set his content visibility from hidden to visible.

    <style>
    .scaleOn {-webkit-transform: scaleY(1.0); -webkit-transition: -webkit-transform 2s; }
    </style>

    function setVisibility() {
    $("#content").css({visibility: 'visible'});
    }

    function dataHere() {
    $("#contentWrapper").addClass('scaleOn'); // and now what? I need run setVisibility when transition ends
    }

    <div style="-webkit-perspective:200px">
    <div id="contentWrapper" style="-webkit-transform: scaleY(0.0)">
    <div id="content"></div>
   </div>
   </div>
BenMorel
  • 34,448
  • 50
  • 182
  • 322
Krab
  • 6,526
  • 6
  • 41
  • 78
  • 1
    Check also this question: http://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes – Keeper Dec 08 '13 at 18:47
  • As Keeper said, use [`transitionEnd`](https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend) – Zach Saucier Dec 08 '13 at 18:49

1 Answers1

1

Maybe you don't need Javascript at all - visibility can be transitioned, and transitions can have delays:

#contentWrapper {
  visbility: hidden;
  -webkit-transition: -webkit-transform 2s, visibility 0s linear 2s;
}
.scaleOn {
  visibility: visible;
}

will make .scaleOn visible after 2 seconds, directly after the transform is finished.

janfoeh
  • 10,243
  • 2
  • 31
  • 56
  • yeah but actually i cannot be sure that the animation will be 100% done after 2 seconds – Krab Dec 12 '13 at 09:44