CODEWITHSUNDEEP
csscss-transitions
Joel
Joel

Reputation: 689

css3 how to trigger an event when a transition is half-way done?

I think everything is in the title. I add a class with javascript which basically does :

.rotation {
   transform:rotateY(180deg);
   transition-timing-function: linear;
   -webkit-transition-timing-function: linear;
}

I need to know when the transition has reached 90 deg. Those values are for the example. The problem is, if I repeat 2 transformations of 90degs, I get a short lag in the middle, not under Chrome but under Microsoft Edge and Firefox.

Does someone has the solution, either to have an event triggered halfway or to avoid this lag when repeating a transition?

Thanks!

Upvotes: 3

Views: 873

Answers (1)

vals
vals

Reputation: 64164

I think that the easiest way to achieve what you want is setting an additional transition on some property that isn't visible.

I have sometimes used z-index, but you can choose another one. Then:

div {
    transition: transform 1s linear, z-index 0.5s linear;
    z-index: 1;
}
.rotation {
    z-index: 2;
    transform:rotateY(180deg);
}

You will get 2 events, the first one at 0.5s

Upvotes: 3

Related Questions