Skip to content

basic-animation-stage

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

basic-animation-stage

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
dist
dist
 
 
src
src
 
 
README.md
README.md
 
 
globals.js
globals.js
 
 
package.json
package.json
 
 

README.md

API Documentation

AnimationStage ⇐ ElementBase

Presents a single item as selected, providing animated transitions when the selection changes. The same animation can be shown at an arbitrary point, generally used to reflect a user-controlled touch or trackpad drag operation in progress.

Live demo

This component is intended to be used as a programmatic rendering surface for components which want to show transitional effects.

The component uses SelectionAnimationMixin mixin, which in turn uses the Web Animations API. For use on browsers which do not support that API natively, you will need to load the Web Animations polyfill.

For a simpler component that exhibits only a sliding effect, but does not require the Web Animations API, see basic-sliding-viewport.

Kind: global class Extends: ElementBase
Mixes: ContentItemsMixin , DistributedChildrenContentMixin , SelectionAnimationMixin , SelectionAriaActiveMixin , SingleSelectionMixin

animationStage.canSelectNext : boolean

True if the selection can be moved to the next item, false if not (the selected item is the last item in the list).

Kind: instance property of AnimationStage. Defined by SingleSelection mixin.

animationStage.canSelectPrevious : boolean

True if the selection can be moved to the previous item, false if not (the selected item is the first one in the list).

Kind: instance property of AnimationStage. Defined by SingleSelection mixin.

animationStage.content : Array.<HTMLElement>

The content of this component, defined to be the flattened array of children distributed to the component.

Kind: instance property of AnimationStage. Defined by DistributedChildrenContent mixin.

"content-changed"

This event is raised when the component's contents (including distributed children) have changed.

Kind: event emitted by AnimationStage. Defined by DistributedChildrenContent mixin.

animationStage.contentChanged()

Invoked when the contents of the component (including distributed children) have changed.

This method is also invoked when a component is first instantiated; the contents have essentially "changed" from being nothing. This allows the component to perform initial processing of its children.

Kind: instance method of AnimationStage. Defined by DistributedChildrenContent mixin.

AnimationStage.itemAdded(item)

Handle a new item being added to the list.

The default implementation of this method simply sets the item's selection state to false.

Kind: static method of AnimationStage. Defined by SingleSelection#symbols mixin.

Param Type Description
item HTMLElement the item being added

AnimationStage.itemAdded(item)

This method is invoked whenever a new item is added to the list.

The default implementation of this method does nothing. You can override this to perform per-item initialization.

Kind: static method of AnimationStage. Defined by ContentItems#symbols mixin.

Param Type Description
item HTMLElement The item that was added.

animationStage.items : Array.<HTMLElement>

The current set of items in the list. See the top-level documentation for mixin for a description of how items differ from plain content.

Kind: instance property of AnimationStage. Defined by ContentItems mixin.

"items-changed"

Fires when the items in the list change.

Kind: event emitted by AnimationStage. Defined by ContentItems mixin.

AnimationStage.itemsChanged()

This method is invoked when the underlying contents change. It is also invoked on component initialization – since the items have "changed" from being nothing.

Kind: static method of AnimationStage. Defined by ContentItems#symbols mixin.

AnimationStage.itemSelected(item, selected)

Apply the indicate selection state to the item.

The default implementation of this method does nothing. User-visible effects will typically be handled by other mixins.

Kind: static method of AnimationStage. Defined by SingleSelection#symbols mixin.

Param Type Description
item HTMLElement the item being selected/deselected
selected boolean true if the item is selected, false if not

AnimationStage.itemSelected(item, selected)

The selection state for a single item has changed.

Invoke this method to signal that the selected state of the indicated item has changed. By default, this applies a selected CSS class if the item is selected, and removed it if not selected.

Kind: static method of AnimationStage. Defined by ContentItems#symbols mixin.

Param Type Description
item HTMLElement The item whose selection state has changed.
selected boolean True if the item is selected, false if not.

"selected-index-changed"

Fires when the selectedIndex property changes.

Kind: event emitted by AnimationStage. Defined by SingleSelection mixin.

Param Type Description
detail.selectedIndex number The new selected index.

"selected-item-changed"

Fires when the selectedItem property changes.

Kind: event emitted by AnimationStage. Defined by SingleSelection mixin.

Param Type Description
detail.selectedItem HTMLElement The new selected item.
detail.previousItem HTMLElement The previously selected item.

animationStage.selectedFraction : number

A fractional value indicating how far the user has currently advanced to the next/previous item. E.g., a selectedFraction of 3.5 indicates the user is halfway between items 3 and 4.

For more details, see FractionalSelectionMixin mixin.

Kind: instance property of AnimationStage. Defined by SelectionAnimation mixin.

animationStage.selectedIndex : number

The index of the item which is currently selected.

A selectedIndex of -1 indicates there is no selection. Setting this property to -1 will remove any existing selection.

Kind: instance property of AnimationStage. Defined by SingleSelection mixin.

animationStage.selectedItem : object

The currently selected item, or null if there is no selection.

Setting this property to null deselects any currently-selected item. Setting this property to an object that is not in the list has no effect.

TODO: Even if selectionRequired, can still explicitly set selectedItem to null. TODO: If selectionRequired, leave selection alone?

Kind: instance property of AnimationStage. Defined by SingleSelection mixin.

animationStage.selectFirst()

Select the first item in the list.

Kind: instance method of AnimationStage. Defined by SingleSelection mixin.

animationStage.selectionAnimationDuration : number

The duration of a selection animation in milliseconds.

This measures the amount of time required for a selection animation to complete. This number remains constant, even if the number of items being animated increases.

The default value is 250 milliseconds (a quarter a second).

Kind: instance property of AnimationStage. Defined by SelectionAnimation mixin. Default: 250

animationStage.selectionAnimationEffect : string

The name of a standard selection animation effect.

This is a shorthand for setting the selectionAnimationKeyframes property to standard keyframes. Supported string values:

  • "crossfade"

  • "reveal"

  • "revealWithFade"

  • "showAdjacent"

  • "slide"

  • "slideWithGap"

    Kind: instance property of AnimationStage. Defined by SelectionAnimation mixin. Default: "&quot;slide&quot;"

animationStage.selectionAnimationKeyframes : Array.<cssRules>

The keyframes that define an animation that plays for an item when moving forward in the sequence.

This is an array of CSS rules that will be applied. These are used as keyframes to animate the item with the Web Animations API.

The animation represents the state of the next item as it moves from completely unselected (offstage, usually right), to selected (center stage), to completely unselected (offstage, usually left). The center time of the animation should correspond to the item's quiscent selected state, typically in the center of the stage and at the item's largest size.

The default forward animation is a smooth slide at full size from right to left.

When moving the selection backward, this animation is played in reverse.

Kind: instance property of AnimationStage. Defined by SelectionAnimation mixin.

animationStage.selectionRequired : boolean

True if the list should always have a selection (if it has items).

Kind: instance property of AnimationStage. Defined by SingleSelection mixin. Default: false

animationStage.selectionWraps : boolean

True if selection navigations wrap from last to first, and vice versa.

Kind: instance property of AnimationStage. Defined by SingleSelection mixin. Default: false

animationStage.selectLast()

Select the last item in the list.

Kind: instance method of AnimationStage. Defined by SingleSelection mixin.

animationStage.selectNext()

Select the next item in the list.

Kind: instance method of AnimationStage. Defined by SingleSelection mixin.

animationStage.selectPrevious()

Select the previous item in the list.

If the list has no selection, the last item will be selected.

Kind: instance method of AnimationStage. Defined by SingleSelection mixin.