Multiple transition demo
Browse files- index.html +8 -4
index.html
CHANGED
@@ -115,7 +115,7 @@
|
|
115 |
<div class="buttons">
|
116 |
<button id="highlight-btn">Animated Highlight</button>
|
117 |
<button id="simple-highlight-btn">Simple Highlight</button>
|
118 |
-
<button id="transition-highlight-btn">
|
119 |
<button id="disallow-close">Disallow Close</button>
|
120 |
<button id="dark-highlight-btn">Super Dark Highlight</button>
|
121 |
<button id="dim-highlight-btn">Super Dim Highlight</button>
|
@@ -314,12 +314,16 @@ npm install driver.js</pre
|
|
314 |
driverObj.highlight({ element: "h1" });
|
315 |
|
316 |
window.setTimeout(() => {
|
317 |
-
driverObj.highlight({ element: ".buttons" });
|
318 |
-
},
|
319 |
|
320 |
window.setTimeout(() => {
|
321 |
-
driverObj.highlight({ element: "
|
322 |
}, 1500);
|
|
|
|
|
|
|
|
|
323 |
});
|
324 |
|
325 |
document
|
|
|
115 |
<div class="buttons">
|
116 |
<button id="highlight-btn">Animated Highlight</button>
|
117 |
<button id="simple-highlight-btn">Simple Highlight</button>
|
118 |
+
<button id="transition-highlight-btn">Transition Highlight</button>
|
119 |
<button id="disallow-close">Disallow Close</button>
|
120 |
<button id="dark-highlight-btn">Super Dark Highlight</button>
|
121 |
<button id="dim-highlight-btn">Super Dim Highlight</button>
|
|
|
314 |
driverObj.highlight({ element: "h1" });
|
315 |
|
316 |
window.setTimeout(() => {
|
317 |
+
driverObj.highlight({ element: ".buttons button:first-child" });
|
318 |
+
}, 800);
|
319 |
|
320 |
window.setTimeout(() => {
|
321 |
+
driverObj.highlight({ element: ".buttons button:nth-child(5)" });
|
322 |
}, 1500);
|
323 |
+
|
324 |
+
window.setTimeout(() => {
|
325 |
+
driverObj.highlight({ element: "h2" });
|
326 |
+
}, 2500);
|
327 |
});
|
328 |
|
329 |
document
|