paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 22:13:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
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) {
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.alert_hover_state = false;
}
@@ -75,7 +84,7 @@ const animate = {
}
if (meta.$container) {
meta.$container.fadeIn(500).addClass("show");
meta.$container.addClass("show-feedback-container");
meta.opened = true;
setTimeout(() => animate.maybe_close(), 100);
}