mirror of
https://github.com/facebook/react.git
synced 2026-02-24 20:53:03 +00:00
e455e28ff8
The initial thought was that an opacity animation from 0.01 to 1 causes trouble on some browser. But after testing on opera 12.15, ff 23, ie 10, chrome 30, desktop/mobile safari 7 and chrome android I confirm this works.
45 lines
761 B
CSS
45 lines
761 B
CSS
.example-enter,
|
|
.example-leave {
|
|
-webkit-transition: all .25s;
|
|
transition: all .25s;
|
|
}
|
|
|
|
.example-enter,
|
|
.example-leave.example-leave-active {
|
|
opacity: 0.01;
|
|
}
|
|
|
|
.example-leave.example-leave-active {
|
|
margin-left: -128px;
|
|
}
|
|
|
|
.example-enter {
|
|
margin-left: 128px;
|
|
}
|
|
|
|
.example-enter.example-enter-active,
|
|
.example-leave {
|
|
margin-left: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.animateExample {
|
|
display: block;
|
|
height: 128px;
|
|
position: relative;
|
|
width: 384px;
|
|
}
|
|
|
|
.animateItem {
|
|
color: white;
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
height: 128px;
|
|
line-height: 128px;
|
|
position: absolute;
|
|
text-align: center;
|
|
-webkit-transition: all .25s; /* TODO: make this a move animation */
|
|
transition: all .25s; /* TODO: make this a move animation */
|
|
width: 128px;
|
|
}
|