From 9d7574f9b0925a5b681e19e81f96ad8d5f2a5be2 Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Mon, 19 Aug 2024 16:16:34 -0700
Subject: [PATCH] rustdoc: animate the `:target` highlight

This approach is, roughly, based on how Discourse does it.
It came up while discussing some other possible sidebar changes,
as a design that made rapid scanning easier while avoiding the
inherent trade-offs in summarizing.
---
 src/librustdoc/html/static/css/rustdoc.css | 13 +++++++++++++
 tests/rustdoc-gui/target.goml              |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index eb5a5d935e2..28df8d3f011 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -1547,10 +1547,23 @@ instead, we check that it's not a "finger" cursor.
 	margin-left: 24px;
 }
 
+@keyframes targetfadein {
+	from {
+		background-color: var(--main-background-color);
+	}
+	10% {
+		background-color: var(--target-border-color);
+	}
+	to {
+		background-color: var(--target-background-color);
+	}
+}
+
 :target {
 	padding-right: 3px;
 	background-color: var(--target-background-color);
 	border-right: 3px solid var(--target-border-color);
+	animation: 0.65s cubic-bezier(0, 0, 0.1, 1.0) 0.1s targetfadein;
 }
 
 .code-header a.tooltip {
diff --git a/tests/rustdoc-gui/target.goml b/tests/rustdoc-gui/target.goml
index 82bd34ed274..92846f8e01d 100644
--- a/tests/rustdoc-gui/target.goml
+++ b/tests/rustdoc-gui/target.goml
@@ -11,7 +11,7 @@ define-function: (
     [theme, background, border],
     block {
         call-function: ("switch-theme", {"theme": |theme|})
-        assert-css: ("#method\.a_method:target", {
+        wait-for-css: ("#method\.a_method:target", {
             "background-color": |background|,
             "border-right": "3px solid " + |border|,
         })