CODEWITHSUNDEEP
css
mashiah
mashiah

Reputation: 109

css - make the transition works just for one way

I have the following code in css:

.item {
    opacity: 0;
    transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
}

.item.seen {
    opacity: 1;
}

when I add the class seen to an .item, the opacity of the item turn from 0 to 1 with transition.

but when I remove the class seen from an .item the opacity transition (from 1 to 0) also runs.

is there any way to make the transition run when .seen is added but not when it is removed?

Upvotes: 2

Views: 7844

Answers (2)

Alexis B.
Alexis B.

Reputation: 1115

In this case, the class which contains the transition never change.

If you setup your transition in the class which toggle, the transition won't be effective on the remove.

.item {
    opacity: 0;
}

.item.seen {
    opacity: 1;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

DEMO

To go beyond, as also well explained in the article Ordering CSS3 Properties from Chris Coyier, you should be careful about the order of you prefixes, with the very good example attached to the article:

http://codepen.io/css-tricks/pen/pqgKH

#wrongway { background: #ccc; padding: 30px; 
  border-radius: 30px 10px;
  -webkit-border-radius: 30px 10px;
}
#rightway { background: #ccc; padding: 30px; 
  -webkit-border-radius: 30px 10px;
  border-radius: 30px 10px;
}

Upvotes: 1

Luca
Luca

Reputation: 9705

.item {
    opacity: 0;
}

.item.seen {
    opacity: 1;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

fiddle: http://jsfiddle.net/qcxt3evn/ (with opacity set to 0.2 just for the purpose of seeing the clickable element)

Also, don't forget to place the standard property after the vendor-prefixed (the latter might be non-compliant to the specification)

Upvotes: 4

Related Questions