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
|