How to compose JS events and CSS transition timings?

Question

Example

Javascript function adds some CSS class to HTML element.
Because of that, HTML element starts to animate its styles (hiding) with transition.
After it hides we want to execute another JS function to add another CSS class to another element and make it visible.

The problem is that functions are JS code, but animations — CSS.

How to use the same time values for JS and CSS code? I want to follow DRY and get only single source of truth.

Is it possible?

What about using developer.mozilla.org/en-US/docs/Web/Events/transitionend ? — mxcoder
– mxcoder, Commented Jul 7, 2018 at 2:01

andria_girl · Accepted Answer · 2018-07-07 02:04:59Z

2

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)

answered Jul 7, 2018 at 2:04

andria_girl

5,1053 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

johnyTran · Accepted Answer · 2018-07-07 05:01:53Z

0

jquery solution for timed css transitions and javascript event listener.

.class_one {

  transition:1s

}
.class_two {

  transition:1s;
  transition-delay:1s;
}

//jquery function
 $('button').click(function(){
   $(this).addClass('class-one class-two');
 });

Using transition delay allows you to time when your transitions to take place consecutively.

answered Jul 7, 2018 at 5:01

johnyTran

54 bronze badges

Collectives™ on Stack Overflow

How to compose JS events and CSS transition timings?

2 Answers 2

The magic of `transitionend`

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

The magic of transitionend

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

The magic of `transitionend`