Css3 Transition Events

CSS3 transition events

W3C CSS Transitions Draft

The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition.

Webkit

To determine when a transition completes, set a JavaScript event listener function for the DOM event that is sent at the end of a transition. The event is an instance of WebKitTransitionEvent, and its type is webkitTransitionEnd.

box.addEventListener( 'webkitTransitionEnd', 
    function( event ) { alert( "Finished transition!" ); }, false );

Mozilla

There is a single event that is fired when transitions complete. In Firefox, the event is transitionend, in Opera, oTransitionEnd, and in WebKit it is webkitTransitionEnd.

Opera

There is one type of transition event
available. The oTransitionEnd event
occurs at the completion of the
transition.

Internet Explorer

The transitionend event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.

Stack Overflow: How do I normalize CSS3 Transition functions across browsers?

How to compose JS events and CSS transition timings?

The magic of `transitionend`

What you're looking for is to use the event listener transitionend after adding the class with .classList.add

element.classList.add('yourTransitionAnimationClass')
element.addEventListener('transitionend', callbackFunction)

CSS transition on click event from another element

Display is not an animatable property. Try changing the form height or opacity. For example:

form {
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
form.hidden {
    opacity: 0;
}

Then just use JavaScript to toggle the class.

How to add CSS transition on closing event of a details tag?

You can substitute toggling .className for details[close] selector; at mouseover event check if element is not .open, if true, set property to .open = true at mouseout event add .className, use .one() animationend event to remove .className and set .open to false at event handler.

$(function() {  $("details").on({    mouseover: function() {      if (!this.open && !$(this).is(".close"))        $(this).prop("open", true)        .one("animationend", function() {          $(this).addClass("animationDone")        })    },    mouseout: function _close() {      if (!$(this).is(".close") && $(this).is(".animationDone"))        $(this).addClass("close")        .one("animationend", function() {          $(this).prop("open", false)          .removeClass("close animationDone")        })    },    click: function(e) {      e.preventDefault();    }  })});

details[open] SUMMARY~* {  animation: sweepin .5s ease-in-out;}
details.close SUMMARY~* {  animation: sweepout .5s ease-in-out;}
@keyframes sweepin {  0% {    opacity: 0;    margin-left: -10px  }  100% {    opacity: 1;    margin-left: 0px  }}
@keyframes sweepout {  0% {    opacity: 1;    margin-left: 0px  }  100% {    opacity: 0;    margin-left: -10px  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><details>  <summary>Here my little summary</summary>  <p>... Do you want more details?</p>  <p>Here have some details!</p></details>

Callback on CSS transition

I know that Safari implements a webkitTransitionEnd callback that you can attach directly to the element with the transition.

Their example (reformatted to multiple lines):

box.addEventListener( 
     'webkitTransitionEnd', 
     function( event ) { 
         alert( "Finished transition!" ); 
     }, false );

CSS3 transition event Listener with jQuery

in jQuery you should use bind() or on() method:

$(this).parent().bind( 'transitionend', function() {alert("1"); });

Css3 Transition Events