These utilities animate when the element or its immediate parent has its
aria-expanded attribute set to true. It works well with the Collapse
pattern.
u-rotateOnExpand180: Rotate 180 degreesu-rotateOnExpand45: Rotate 45 degreesCauses an element to spin forever. Useful to indicate loading states.
<svg width="28" height="28" viewBox="0 0 28 28" role="presentation" class="Icon Icon--block u-flexExpandSides u-textSize6 u-spin">
<path d="M27.5 14c0 7.453-6.047 13.5-13.5 13.5s-13.5-6.047-13.5-13.5c0-6.781 5-12.391 11.5-13.359v3.563c-4.562 0.922-8 4.969-8 9.797 0 5.516 4.484 10 10 10s10-4.484 10-10c0-4.828-3.437-8.875-8-9.797v-3.563c6.5 0.969 11.5 6.578 11.5 13.359z"/>
</svg>
You can fade elements in and out using our u-fade utility in conjunction with the transitionHiddenElement method on our global cpeToolkit namespace.
For more information about using transitionHiddenElement you can view the module on GitHub
<button class="Button js-example-trigger">
Toggle Faded Content
</button>
<div class="u-fade js-faded-content u-spaceTop" hidden>
Peekaboo!
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const fader = cpeToolkit.transitionHiddenElement({
element: document.querySelector('.js-faded-content'),
visibleClass: 'is-visible',
});
document.querySelector('.js-example-trigger').addEventListener(
'click', () => {
fader.toggle();
}
);
});
</script>