CODEWITHSUNDEEP
css
Grapho
Grapho

Reputation: 1654

control the order in which property transitions occur?

If a create some simple rules with a transition:

.foo {
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .3s ease;
}
.foo.is-hidden {
    opacity: 0;
    top: -9999;
    left: -9999;
}

i am dynamically adding and removing the is-hidden class with js.

<div class="foo"> ----> <div class="foo is-hidden">

when i do this, I would like the opacity transition to happen before the absolute position flips it off the screen.

can this be done with just transition? or do i somehow leverage a keyframe animation? I have not done such a thing before?

Upvotes: 1

Views: 88

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

You can use transition-delay in conjunction with transition:

.foo {
  transition: opacity 1s ease, top 1s, left 1s;
  transition-delay: 0s, 1s, 1s;
}

In my Fiddle, I set opacity to 0.5 so you can see the effect:

http://jsfiddle.net/5knxvkc0/

Upvotes: 2

Related Questions