css - spraw, aby przejście działało tylko na jeden sposób - css, css3

Mam następujący kod w css:

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

.item.seen {
opacity: 1;
}

kiedy dodaję klasę seen do .item, opacity przedmiotu od 0 do 1 z przejściem.

ale kiedy usunę klasę seen z .item temu opacity przejście (od 1 do 0), działa również.

jest jakiś sposób aby przejście wykonywania kiedy .seen jest dodane, ale nie kiedy jest usuwany?

Odpowiedzi:

.item {
opacity: 0;
}

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

skrzypce: http://jsfiddle.net/qcxt3evn/ (z opacity Ustawić 0.2 tylko w celu zobaczenia elementu klikalnego)

Ponadto nie zapomnij umieścić standardowej właściwości po prefiks dostawcy (ten ostatni może być niezgodny ze specyfikacją)

W tym przypadku class który zawiera transition nigdy się nie zmieniaj.

Jeśli skonfigurujesz swój transition w class które przełączenie, przejście nie będzie skuteczne na usunąć.

.item {
opacity: 0;
}

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

PRÓBNY

Aby wyjść poza, jak również dobrze wyjaśniono w artykule Zamawianie właściwości CSS3 od Chris Coyier, powinieneś uważać na zamówienie prefiksów z bardzo dobrym przykładem dołączonym do artykułu:

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;
}