letsGo

What is letsGo?

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.

letsGo 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.

Why We Created letsGo

We have run into a handful of situations where we just simply wanted to add some nice CSS transitions. Unfortunately, regular HTML seems to be deprived of this, so we aimed to remedy this problem. We created letsGo because we wanted to create a lightweight framework that features powerful HTML extensions without the weight of a full framework such as Angularjs or Vuejs.

Setup

Installation Options:

npm install letsgo

bower install letsgo

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

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>

One last thing...

Paste this class into your css. If you're already using Frow CSS skip this step.

Commands

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)

Examples:

// insert comment for specific example
<div onclick="letsgo(.info-box-div, add, .blue-background, true)"></div>
// Insert comment for specific example
<div onclick="letsgo(#side-bar-menu, hide, false)"></div>

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;
}