Add transition animation to transition screen

Avoid a harsh switch to the transition screen (loading, connecting) by
using some CSS transition animation.
This commit is contained in:
Pierre Ossman 2021-11-19 16:18:51 +01:00
parent 301714928b
commit 7ad4e60df6
1 changed files with 7 additions and 2 deletions

View File

@ -871,7 +871,11 @@ select:active {
/* Transition screen */ /* Transition screen */
#noVNC_transition { #noVNC_transition {
display: none; transition: 0.5s ease-in-out;
display: flex;
opacity: 0;
visibility: hidden;
position: fixed; position: fixed;
top: 0; top: 0;
@ -892,7 +896,8 @@ select:active {
:root.noVNC_connecting #noVNC_transition, :root.noVNC_connecting #noVNC_transition,
:root.noVNC_disconnecting #noVNC_transition, :root.noVNC_disconnecting #noVNC_transition,
:root.noVNC_reconnecting #noVNC_transition { :root.noVNC_reconnecting #noVNC_transition {
display: flex; opacity: 1;
visibility: visible;
} }
:root:not(.noVNC_reconnecting) #noVNC_cancel_reconnect_button { :root:not(.noVNC_reconnecting) #noVNC_cancel_reconnect_button {
display: none; display: none;