css: Immediately transition visibility when showing popup
For reasons I don't understand, an activated popup was visible during transition even though the boolean `visibility` property didn't switch to `visible` until the end of the 0.3s transition. This prevented input elements from getting focus until the end of the transition. Now input elements can get focus right away.pull/5485/head
parent
56d6a1800b
commit
ff7a2aa0ea
|
@ -2,13 +2,16 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
right: 30px;
|
right: 30px;
|
||||||
transition: all 0.3s cubic-bezier(0.74, -0.05, 0.27, 1.75);
|
/* visibility must transition immediately so that input elements inside the popup can get focus */
|
||||||
|
transition: all 0.3s cubic-bezier(0.74, -0.05, 0.27, 1.75), visibility 0s;
|
||||||
z-index: 500;
|
z-index: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup:not(.popup-show):not(#users.chatAndUsers) {
|
.popup:not(.popup-show):not(#users.chatAndUsers) {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(0.7);
|
transform: scale(0.7);
|
||||||
|
/* visibility must not change to hidden until the end of the transition */
|
||||||
|
transition: all 0.3s cubic-bezier(0.74, -0.05, 0.27, 1.75);
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue