Merge pull request #560 from glowing-bear/improve-animation

Use transform to improve smootheness.
This commit is contained in:
Lorenz Hübschle-Schneider 2015-03-20 14:16:23 +01:00
commit 892563fb39

View file

@ -237,8 +237,8 @@ input[type=text], input[type=password], #sendMessage, .badge {
bottom: 35px; /* input bar */ bottom: 35px; /* input bar */
padding-top: 42px; /* topbar */ padding-top: 42px; /* topbar */
padding-bottom: 7px; padding-bottom: 7px;
-webkit-transition:0.35s ease all; -webkit-transition:0.2 ease-in-out all;
transition:0.35s ease all; transition:0.2s ease-in-out all;
} }
#bufferlines > table { #bufferlines > table {
margin-top: 35px; margin-top: 35px;
@ -281,8 +281,8 @@ td.time {
bottom: 0; bottom: 0;
height: 35px; height: 35px;
width: 100%; width: 100%;
-webkit-transition:0.35s ease all; -webkit-transition:0.2s ease-in-out all;
transition:0.35s ease all; transition:0.2s ease-in-out all;
z-index: 1; z-index: 1;
} }
.content[sidebar-state=visible] .footer { .content[sidebar-state=visible] .footer {
@ -345,8 +345,8 @@ table.notimestampseconds td.time span.seconds {
} }
#sidebar .showquickkeys .buffer .buffer-quick-key { #sidebar .showquickkeys .buffer .buffer-quick-key {
transition: all ease 0.5s; transition: all ease-in-out 0.5s;
-webkit-transition: all ease 0.5s; -webkit-transition: all ease-in-out 0.5s;
transition-delay: 0.2s; transition-delay: 0.2s;
-webkit-transition-delay: 0.2s; -webkit-transition-delay: 0.2s;
opacity: 0.7; opacity: 0.7;
@ -355,8 +355,8 @@ table.notimestampseconds td.time span.seconds {
margin-left: -0.7em; margin-left: -0.7em;
margin-right: -0.2em; margin-right: -0.2em;
font-size: smaller; font-size: smaller;
transition: all ease 0.5s; transition: all ease-in-out 0.5s;
-webkit-transition: all ease 0.5s; -webkit-transition: all ease-in-out 0.5s;
opacity: 0; opacity: 0;
text-shadow: -1px 0px 4px rgba(255, 255, 255, 0.4), text-shadow: -1px 0px 4px rgba(255, 255, 255, 0.4),
0px -1px 4px rgba(255, 255, 255, 0.4), 0px -1px 4px rgba(255, 255, 255, 0.4),
@ -562,6 +562,7 @@ img.emoji {
bottom: 0px; bottom: 0px;
top: 0px; top: 0px;
padding-bottom: 35px; padding-bottom: 35px;
width: 200px;
} }
#sidebar.in, #sidebar.collapsing { #sidebar.in, #sidebar.collapsing {
@ -571,15 +572,16 @@ img.emoji {
} }
#sidebar[data-state=visible] { #sidebar[data-state=visible] {
width: 200px; transform: translate(0,0);
} }
#sidebar[data-state=hidden] { #sidebar[data-state=hidden] {
left: -200px; transform: translate(-200px,0);
} }
.content[sidebar-state=visible] #bufferlines, .content[sidebar-state=visible] .footer { .content[sidebar-state=visible] #bufferlines, .content[sidebar-state=visible] .footer {
margin-left: 0px; margin-left: 0px;
transform: translate(200px,0);
} }
#topbar .title { #topbar .title {