Add fade animation

index.html

@@ -25,6 +25,8 @@
         align-items: center;
         justify-content: center;
         height: 100vh;
+        max-width: 1200px;
+        margin: 0 auto;
       }
 
       h1 {
@@ -50,6 +52,21 @@
         content: "•";
         margin-right: 10px;
       }
+
+      .buttons {
+        display: flex;
+        margin-top: 20px;
+        gap: 10px;
+      }
+
+      button {
+        all: unset;
+        border: 1px solid #ccc;
+        padding: 5px 15px;
+        border-radius: 5px;
+        display: block;
+        cursor: pointer;
+      }
     </style>
   </head>
   <body>
@@ -57,6 +74,12 @@
       <h1>driver.js <sup>next</sup></h1>
       <p>Rewritten and enhanced version of driver.js</p>
 
+      <div class="buttons">
+        <button id="highlight-btn">Simple Highlight</button>
+        <button id="tour-btn">Start Tour</button>
+        <button id="highlight-destroy">Destroy after 2s</button>
+      </div>
+
       <ul>
         <li>Written in TypeScript</li>
         <li>Lightweight — only 5kb gzipped</li>
@@ -69,9 +92,22 @@
 
       const driverObj = driver();
 
-      driverObj.highlight({
-        element: "li",
+      document.getElementById("highlight-btn").addEventListener("click", () => {
+        driverObj.highlight({
+          element: "h1",
+        });
       });
+
+      document
+        .getElementById("highlight-destroy")
+        .addEventListener("click", () => {
+          driverObj.highlight({
+            element: "h1",
+          });
+          setTimeout(() => {
+            driverObj.destroy();
+          }, 2000);
+        });
     </script>
   </body>
 </html>

src/driver.ts

@@ -9,13 +9,13 @@ export type DriveStep = {
 
 export function driver() {
   function init() {
-    document.body.classList.add("driver-active");
+    document.body.classList.add("driver-active", "driver-fade");
 
     initEvents();
   }
 
   function destroy() {
-    document.body.classList.remove("driver-active");
+    document.body.classList.remove("driver-active", "driver-fade");
 
     destroyEvents();
     destroyHighlight();

src/style.css

@@ -11,3 +11,17 @@
   pointer-events: auto;
   cursor: auto;
 }
+
+@keyframes animate-fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.driver-fade .driver-stage {
+  animation: animate-fade-in 100ms ease-in-out;
+}