x-deck
<x-deck>
s are components that act similarly to slideshows or galleries where cards can be cycled independently of order with a variety of different transitions.
Basic usage
For basic transitions between <x-card>
s, simply call the .shufflePrev()
and .shuffleNext()
methods of the <x-deck>
.
Users can also call .shuffleTo(index)
if they already know the index of the target card in the deck.
These cards can contain any markup!




Markup
JavaScript
// assume prevButton, nextButton, toButton, and deck
//are already defined as their respective DOM elements
prevButton.addEventListener("click", function(){
deck.shufflePrev();
});
nextButton.addEventListener("click", function(){
deck.shuffleNext();
});
toButton.addEventListener("click", function(){
deck.shuffleTo(1);
});
Specifying animation direction
The .shufflePrev()
, .shuffleNext()
, and .shuffleTo()
methods can also be called with an optional direction parameter of either "forward"
or "reverse"
to specify how animations should progress.
If this parameter is "auto"
or not given, we automatically choose an animation direction depending on whether the new card is ahead of or behind the current card in the deck.
Automatic animation direction
Reverse animation direction
Forward animation direction
Markup
Specifying deck transitions: transition-type/.transitionType
The <x-deck>
's transition-type
attribute (also accessible by the .transitionType
property) controls how all cards in the deck animate in and out.
Valid options:
scrollLeft,
scrollUp,
scrollRight,
scrollDown,
flipX,
flipY,
coverLeft,
coverUp,
coverRight,
coverDown,
uncoverLeft,
uncoverUp,
uncoverRight,
uncoverDown,
none
Markup
JavaScript
// assume transitionButton and deck are already
// defined as their respective DOM elements
var types = [
"scrollLeft", "scrollUp", "scrollRight", "scrollDown",
"flipX", "flipY",
"coverLeft", "coverUp", "coverRight", "coverDown",
"uncoverLeft", "uncoverUp", "uncoverRight", "uncoverDown",
"none"
];
transitionButton.addEventListener("click", function(){
var oldType = deck.transitionType;
deck.transitionType = types[(types.indexOf(oldType)+1) % type.length];
// force animation to make visible for demo
deck.shuffleNext("forward");
});
Specifying card-specific animations: transition-override/.transitionOverride
While the <x-deck>
's transition-type
attribute changes the animation of all cards, it is also possible to specify how a specific <x-card>
animates when entering the deck with the transition-override
attribute (also accessible through the .transitionOverride
property.
An <x-card>
's transition-override
attribute can take any of the same values as the <x-deck>
's transition-type
attribute.
Markup
Adding and removing cards
To add or remove <x-card>
s from a deck, simply use .appendChild()
or .removeChild()
in the same way that any other DOM node would be added/removed.
Markup
JavaScript
// assume addButton, removeButton, and deck
//are already defined as their respective DOM elements
// also assume that .randomColor simply returns a random color rgb string
addButton.addEventListener("click", function(){
// deck.numCards retrieves the number of cards currently in the deck
var newIndex = deck.numCards;
var newCard = document.createElement("x-card");
newCard.style.backgroundColor = randomColor();
newCard.textContent = newIndex;
deck.appendChild(newCard);
// for demo, shuffle to newly inserted card
deck.shuffleTo(newIndex);
});
removeButton.addEventListener("click", function(){
if(deck.numCards > 0){
//deck.getCardAt retrieves the <x-card> at the given index
var lastCard = deck.getCardAt(deck.numCards-1);
deck.removeChild(lastCard);
}
});
Styling deck appearances
Styling the <x-deck>
and <x-card>
elements can be done like any other DOM elements. However, the deck also provides some CSS selectors to customize how cards appear during animations.
To style how a card appears as it is transitioning out of the deck, apply styles to x-card[leaving]
To style how a card appears when it is specifically selected in the deck, apply styles to x-card[selected]
Markup
Styling
/* grey out leaving card */
#custom-styles x-card[leaving]{
text-shadow: none;
background-color: grey!important;
color: #ccc;
opacity: 0.6;
}
/* add caption to selected card */
#custom-styles x-card[selected]:after{
content: "selected";
display: block;
font-size: .2em;
}
Handling events: shufflestart
and shuffleend
When the deck is transitioning cards, it fires events in order to signal different stages of the animation.
The <x-deck>
fires a shufflestart
event when it has finished setting all attributes of the deck and is about to start a transition animation.
The <x-deck>
fires a shuffleend
event when a transition animation has completed. Much like a transitionend
event, the shuffleend
event will not fire if interrupted by another transition, and will thus only fire on a full animation completion.