Fade

full screen new window example HTML markup

The fade transtion will fade the contents opacity to show and hide.

Usage

The fade should be used whenever content should be hidden from the user, some common usages are:

Tabs
Modal
Lazy loading
Hero image

Each element should have a class slb-fade.

To show and hide the element dynamically add and remove the class slb-show on the element.

Accessible attributes

Accessible attribute	Description
`aria-hidden`	This is a boolean value set on the hidden element that should be true when hidden and false when it is not

JavaScript Support

JavaScript Support class name	Description
`slb-fade`	Default behaviour of the fade to invisible
`slb-show`	Display the fade transition

Lazy loaded image

This examples demonstrates how an image might visually look when lazy loaded

Markup: transitions\transition-fade.hbs

Copy

<div class="slb-hero slb-hero--bg-primary">
    <div id="heroTransitionExample" class="slb-hero__image-gradient slb-fade"></div>
    <div class="slb-hero__container">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="slb-hero__content">
                    <h1 class="slb-hero__text">Lazy loaded image</h1>
                    <p class="slb-hero__text">This examples demonstrates how an image might visually look when lazy loaded</p>
                </div>
            </div>
        </div>
    </div>
</div>

Source: components/_transitions.scss