EffectMixin

Overview

Purpose: Simple foundation for component with visual transition effects.

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

events ➞ methods → 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.

EffectMixin is often used in conjunction with TransitionEffectMixin,