</pre> <div resize=""></div> <h2>Pseudo Classes</h2> <p>The library supports user-actioned pseudo classes, like <code>:hover</code>, <code>:active</code>, <code>:focus</code></p> <div resize="" id="pseudo-example" class="interactive-example" tabindex="0">Hover, click or focus me.</div> <h2>Animations*</h2> <p>The library will detect changes which occur during animations.</p> <div resize="" id="animation-example" class="interactive-example">Tap me.</div> <h2>Transitions*</h2> <p>The library will detect changes which occur during transition.</p> <div resize="" id="transition-example" class="interactive-example">Tap me.</div> <p> <strong>NB:</strong> Slow-starting transitions may not be noticed, unless, other interactions occur in the application. Any missed calculations will be noticed at the end of the transition. </p> <h2>Performance Test</h2> <p>This animates 200 elements and counts the changes. To start/stop the animation, tap the cell area.</p> <p>Updates: <span id="performance-count">0</span></p> <div id="performance-example"></div> <hr> <p><strong style="float:left;margin-left:-1em">*</strong>Once the animation, or, transition has finished, the observer will sleep and wait for the next interaction. This keeps CPU idle, reducing battery consumption on portable devices.</p> </main> <script src="page.334969d7.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body></html>