Warning: letsGo is still pre-version 1.0.0. Please excuse this documentation as it evolves with the product.

About

letsGo is a JavaScript library to make it easy to show, hide, and modify elements on a webpage, with support for creating CSS animations, similar to Angular's ngAnimate.

letGo is available now and is functional, however the code will still be gaining some features, so the parameters for the function are subject to change. Once the parameters and functionality is finalized, the code will hit 1.0.0.

Setup

Install

npm
npm install letsgo
Or, Bower
bower install letsgo
Or, manual download

Download a letsGo .zip via GitHub, then place the unzipped folder inside of your project's folder.

Or, CDN

You will need to pick out the version of letsGo you would like to use, most likely the latest. A list of all releases is available on GitHub.

<!DOCTYPE html>
<html>
    <head>
        <title>letsGo Project</title>
        <script type="text/javascript" src="https://cdn.rawgit.com/Beg-in/letsGo/[X.Y.Z]/letsgo.js" async></script>
        ...
    </head>
    ...
</html>

Commands

<div onclick="letsGo('target', 'command', 'attribute', queue);">Test</div>

target string

The element(s) to be operated upon. Can either be an id, class, or object tag.

Examples: '#sidebar', '.frow', 'div'

command string

The command to be done on the target. Must be one of five strings.

Examples: 'show', 'hide', 'add', 'remove', 'toggle'

attribute string

If the command in use is either 'add' or 'remove', then an attribute to be added or removed is required. If the command is 'toggle' then it will just alternate between show/hide unless an attribute is declared. Can either be a class, id, or attribute.

Examples: '.red-background', '#title', 'disabled', 'checked=checked'

queue boolean

If set to true, this command is added to a queue. It will only run after every other command in the queue ahead of it finishes. Defaults to false.

Examples: true, false (default)

Animation Support

With letsGo the animations themselves are handled completely by CSS. The animations can be done via a CSS Animation or CSS transition. By using letsGo, certain classes are added to the element being altered in a specific order, allowing you to do the CSS animation.

Classes Added Order

Here is an example of the classes added when adding a class. For this example we are adding the class '.kitty-cat'.

class=" "

class="letsGo-animate"

class="letsGo-animate kitty-cat-add"

class="letsGo-animate kitty-cat-add kitty-cat-add-active"

class="letsGo-animate kitty-cat-add kitty-cat-add-active kitty-cat"

class="kitty-cat"

Using a CSS Transition
.demo-box {
    width: 140px;
    height: 140px;
    background-color: LightSeaGreen;
}

.blue-background {
    background-color: RoyalBlue;
}

.blue-background-add, .blue-background-remove {
    transition: background-color 1s;
}

.blue-background-add-active {
    background-color: RoyalBlue;
}

.blue-background-add-remove {
    background-color: LightSeaGreen;
}
Using a CSS Animation
@keyframes spin-clockwise {
    0% {transform: rotate(0deg); border-radius: 0;}
    50% {border-radius: 50%;}
    100% {transform: rotate(720deg); border-radius: 0;}
}

@keyframes spin-counterclockwise {
    0% {transform: rotate(0deg); border-radius: 0;}
    50% {border-radius: 50%;}
    100% {transform: rotate(-720deg); border-radius: 0;}
}

.demo-animation-box {
    width: 140px;
    height: 140px;
    background-color: LightSeaGreen;
}

.demo-twirl-add {
    animation-name: spin-clockwise;
    animation-duration: 3s;
}

.demo-twirl-remove {
    animation-name: spin-counterclockwise;
    animation-duration: 3s;
}

letsGo is from Cody Sherman via Beg.in