drift-state

Drift State

A small JS helper to give your CSS transitions a transitioning (aka drifting) state, with no additional library dependencies (like jQuery).

Work in progress

This project works, but is still in early stages of development, so use with caution.

Polyfills

The library uses the following features, which you'll need to polyfill if not supported:

• classList
• Array.forEach
• Array.isArray
• querySelector/querySelectorAll
• addEventListener/removeEventListener

Options

• el {HTMLElement}: The HTML element that you are transitioning.
• property {string}: The CSS property that you are transitioning.
• cssState: {string} (optional): The CSS state name (defaults to adrift).
• cssNoState: {string} (optional): The blocking CSS state name, which gets added by browsers that don't support CSS transitions (defaults to no-drift).
• stateTarget: {HTMLElement} (optional): An element that you want to attach the CSS states to, if not using el. Defaults to using el.
• clearCssStateWaitTime: {number} (optional): The amount of milliseconds to wait until clearing wrongly configured CSS states. Defaults to 5000 (5 seconds).
• showLogs: {boolean} (optional): If true, will show all logs in the console. This is false by default.
• transitionEndCB: {function} (optional): Optionally include a function to call when the transition is complete.

Notes

• Inspired by jQuery plugin 'prepareTransition' https://github.com/snookca/prepareTransition
• Using ES6 or TypeScript

import * as ds from 'drift-state';

Examples

Simple example

A simple example can be run by opening src/example/example.html in the browser. Shows a fade out that adds a display:none when finished.

Example CSS

.box {
    float:left;
    width: 100px;
    height: 100px;
    background-color: #ababab;
    opacity: 1;
    transition: opacity 1s linear;
}
.box.is-gone {
    opacity: 0;
    display: none;
}
.box.adrift {
    display: block !important;
}
.btn {
    float:left;
    clear:left;
}

Example JS

var box = document.querySelector(".box")
    , btn = document.querySelector(".btn");

btn.addEventListener("click", function(evt) {
    window.driftState.go({
        el: box, property: "opacity"
    });
    box.classList.toggle("is-gone");
});

Example with parent state

This example can be run by opening src/example/example-parent-state.html in the browser. Shows a parent state affecting the box position and colour.

Example CSS

.box {
    float:left;
    width: 100px;
    height: 100px;
    background-color: #ababab;
    opacity: 1;

    transition: 0.5s linear;
    transition-property: opacity, transform;
    transform-origin: top center;
    
    transform: translateY(0%);
    display: block;
    
}

.is-down .box {
    transform: translateY(100px);
    background-color: red;
}

.is-gone .box {
    opacity: 0;
    display: none;
}
.box.adrift {
    display: block !important;
    background-color: #ababab;
}
.btn {
    float:left;
    clear:left;
}

Example JS

var box = document.querySelector(".box")
  , container = document.querySelector(".container")
  , btn1 = document.querySelector(".btn1")
  , btn2 = document.querySelector(".btn2");

btn1.addEventListener("click", function(evt) {
    window.driftState.go({
        el: box, property: "opacity"
    });
    container.classList.toggle("is-gone");
});

btn2.addEventListener("click", function(evt) {
    window.driftState.go({
        el: box, property: "transform"
    });
    container.classList.toggle("is-down");
});