Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feedback_widget: Don't use non-optimal animation properties. 

Animating `box-shadow` and `top` is slow since the browser
drops frames when animating them. We can fix it by using `will-change`
property but it is just better to not animate them and instead
use transform.
This commit is contained in:
Aman Agrawal 2023-05-24 06:12:18 +00:00 committed by Tim Abbott
parent a3d6c47b7d
commit 263ee4cb86
2 changed files with 43 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/feedback_widget.ts
View File

@ -64,7 +64,16 @@ const animate = {
} }
if (meta.$container) { if (meta.$container) {
meta.$container.fadeOut(500).removeClass("show"); meta.$container.addClass("slide-out-feedback-container");
// Delay setting `display: none` enough that the hide animation starts.
setTimeout(
() =>
meta.$container?.removeClass([
"show-feedback-container",
"slide-out-feedback-container",
]),
50,
);
meta.opened = false; meta.opened = false;
meta.alert_hover_state = false; meta.alert_hover_state = false;
} }
@ -75,7 +84,7 @@ const animate = {
} }
if (meta.$container) { if (meta.$container) {
meta.$container.fadeIn(500).addClass("show"); meta.$container.addClass("show-feedback-container");
meta.opened = true; meta.opened = true;
setTimeout(() => animate.maybe_close(), 100); setTimeout(() => animate.maybe_close(), 100);
} }

56
web/styles/zulip.css
View File

@ -284,28 +284,50 @@ p.n-margin {
top: -2px; top: -2px;
} }
/* See https://web.dev/animations-guide/#triggers before adding any funny animation properties here. */
@keyframes feedback-slide-in {
from {
transform: translateY(-120%);
opacity: 0;
}
to {
transform: translateY(50px);
opacity: 1;
}
}
@keyframes feedback-slide-out {
from {
transform: translateY(50px);
opacity: 1;
}
to {
transform: translateY(-120%);
opacity: 0;
}
}
#feedback_container { #feedback_container {
display: none; display: none;
position: absolute; position: fixed;
width: 400px; width: 400px;
top: 0; top: 0;
left: calc(50vw - 220px); left: calc(50vw - 220px);
padding: 15px; padding: 15px;
background-color: hsl(0deg 0% 98%); background-color: hsl(0deg 0% 98%);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 30px hsl(0deg 0% 0% / 25%); box-shadow: 0 0 30px hsl(0deg 0% 0% / 25%);
z-index: 110; z-index: 110;
animation-name: pulse; &.show-feedback-container {
animation-iteration-count: infinite; display: block;
animation-duration: 2s; animation: feedback-slide-in 0.6s forwards;
}
transition-property: top, bottom; &.slide-out-feedback-container {
transition-duration: 0.5s; animation: feedback-slide-out 0.6s;
&.show {
top: 50px;
} }
& h3 { & h3 {
@ -321,20 +343,6 @@ p.n-margin {
} }
} }
@keyframes pulse {
0% {
box-shadow: 0 0 30px hsl(0deg 0% 0% / 35%);
}
50% {
box-shadow: 0 0 30px hsl(0deg 0% 0% / 15%);
}
100% {
box-shadow: 0 0 30px hsl(0deg 0% 0% / 35%);
}
}
.fade-in-message { .fade-in-message {
animation-name: fadeInMessage; animation-name: fadeInMessage;
animation-duration: 1s; animation-duration: 1s;