feat: add animation to arrondissements

src/map.js

@@ -32,8 +32,10 @@ class ParisMap {
   }
 
   #drawParis() {
+    const sortedArrondissements = this.#arrondissements.features.sort((a, b) => a.properties.c_ar - b.properties.c_ar);
+    this.#g.attr('class', 'slide-enter-content');
     this.#g.selectAll("path")
-      .data(this.#arrondissements.features)
+      .data(sortedArrondissements)
       .join("path")
       .attr('fill', '#dee2e6')
       .attr("d", d3.geoPath()

src/style.scss

@@ -32,4 +32,39 @@
     border: 1px solid #000;
     border-radius: 0.25rem;
     color: #3b3d45;
+}
+
+@keyframes slide-enter {
+    0% {
+        transform: translateY(10px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    html:not(.no-sliding) [slide-enter],
+    html:not(.no-sliding) .slide-enter,
+    html:not(.no-sliding) .slide-enter-content > *:not(:has(.table-of-contents)) {
+        --enter-stage: 0;
+        --enter-step: 40ms;
+        --enter-initial: 0ms;
+        animation: slide-enter 1s both 1;
+        animation-delay: calc(
+                var(--enter-initial) + var(--enter-stage) * var(--enter-step)
+        );
+    }
+
+    .slide-enter-content {
+        $element: 100;
+        @for $i from 1 to $element {
+            > *:nth-child(#{$i}) {
+                --enter-stage: #{$i} !important
+            }
+        }
+    }
 }