eZ Community » Blogs » Piotr Nalepa » How to detect element’s CSS...

By

How to detect element’s CSS transition end time with JavaScript?

Monday 26 January 2015 3:22:33 pm

  • Currently 3 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

In this blog post I’m going to share with you some knowledge on how to detect when the CSS animation/transition/transformation completes using capabilities of JavaScript.

As you might know, PlatformUI has some unique interface animations adding some coolness to it. When developing some parts of PlatformUI application I came to the point when I had to detect element’s position after rendering a view. You have to know, that when any of the PlatformUI’s views is rendered it receives a slide-in animation and then it becomes usable to a user.

Adding a transition to an element with CSS

As an example, I’m going to use this piece of HTML code:

As you can see, there’s nothing special. Just an empty div inside another empty div. So let’s add some CSS styles to it now:

To change element’s position I’m using a CSS property called transform with a value translate3d(). If you’re not familiar with newest information about CSS3, using that property with its value is much more user’s hardware-friendly, in terms of performance, than traditional positioning with top, left, right, bottom properties. The browser doesn’t have to recalculate layout every time the position of the element has changed.

Additionally, to give some smoothness to the element, when changing its position, I’m using the transition property.

Detecting end of transition with JavaScript.

Now it’s time to make a use of JavaScript. There’s an interesting thing about CSS transitions – a browser fires the transitionend event just after the transition is completed. If you are using CSS keyframes animations a browser will fire animationend event.

These two events are very handy. Thanks to them, you don’t have to set a proper timeout value in your JS code to calculate element’s position when transition completes. You just have to wait until transition or animation are completed and listen to the events fired by a browser. Look at the piece of code below:

As you might notice, I’m attaching four event listeners to an element (for all vendor-prefixed events). Currently, a prefixless event is available only in IE10, Mozilla Firefox (since version 4.0), Google Chrome (since version 36) and Opera (since version 23). Other browsers need vendor-prefixed events.

One thing to remember, the events are not available in IE9 and older.

Proudly Developed with from