EffectMixin

Simple foundation for component with visual effects

Overview

Purpose: Simple foundation for component with visual transition effects.

This mixin primarily works at the beginning of the Elix render pipeline:

eventsmethods → setState → render DOM → post-render

Expects the component to provide:

  • setState method compatible with ReactiveMixin's setState.

Provides the component with:

  • [internal.state].enableEffects member indicating whether the component should render visual transitions.

Usage

import EffectMixin from "elix/src/base/EffectMixin.js";
class MyElement extends EffectMixin(HTMLElement) {}

Elements that exhibit visual effects should generally not do so when a component is first rendered.

For example, components like Drawer and ExpandableSection exhibit a sliding transition when opened. Those components can also be rendered initially opened, e.g., by setting their opened attribute to true in markup. However, in such cases, the component should generally not show the sliding transition when a page is first loaded. It would be quite distracting to see the component appear and then immediately begin transitioning to a different visual state before any user interaction.

To achieve this result, EffectMixin tracks a simple state member enableEffects that is false by default, and becomes true only after the component has finished its initial render. A component can use the enableEffects state member to control the application of visual effects such as CSS transitions.

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie molestie enim porta dapibus. Phasellus dolor quam, egestas eu viverra at, porttitor in diam. Donec risus tellus, accumsan eget ipsum sed, vestibulum blandit ante. Nullam rhoncus leo nec lobortis convallis. Donec posuere tellus a nibh dignissim, rhoncus viverra neque rutrum. Suspendisse rutrum at massa vitae venenatis. Suspendisse ut risus pellentesque lacus dictum aliquet. Cras a arcu id odio molestie imperdiet.

Section 2

Pellentesque vitae eros ac nulla aliquam eleifend. Nunc ornare sollicitudin arcu id suscipit. Donec sed nisl libero. Nulla facilisi. Proin ornare feugiat molestie. Mauris velit mi, volutpat sit amet posuere quis, tristique et urna. Donec sit amet tellus magna. Aenean feugiat suscipit neque, ut porttitor diam auctor in. Sed faucibus finibus ipsum et pharetra. In hac habitasse platea dictumst. Cras facilisis justo eu lectus luctus, et interdum velit aliquet.

Section 3

Aliquam vitae nulla efficitur turpis viverra placerat. Mauris fermentum tellus vel elementum aliquet. Integer vitae arcu et mi tristique lacinia. Cras placerat ultrices velit, id interdum ipsum commodo efficitur. Maecenas maximus odio a nisi dapibus, non dapibus nisl venenatis. Morbi tristique interdum leo, non tincidunt sapien efficitur ac. Nunc hendrerit turpis eget enim rhoncus sagittis. Aenean ac euismod magna. Phasellus et posuere nisi.
Demo: The first ExpandableSection is open by default, without any initial visual effect

EffectMixin is often used in conjunction with TransitionEffectMixin,