animate-it v1.3.3
DEV
Animate-it@1.3.2
Installation
Download
- First of all, you are going to include the js file
anim.min.js, or ratheranim.jsfor developers. Then, you are going to add theanim.min.css, or ratheranim.cssfor developers which is the style file.
If you came from the previous versions, and you wonder where are the theme files, the answer is that, we have changed it. Now, if you want to include any theme file, just write it in
data-animate-styleas an attribute for the body element.
NPM-Installation
Run
npm i dev-animate.Then include the animate script
<script src="./node_modules/dev-animate/js/anim.min.js"></script>.Then include the animate style
<link type="stylesheet" href="./node_modules/dev-animate/css/anim.min.css" />.
Docs
There are various built-in functions in this library.
1 - _popup_choice({subject, text, button_1, button_2}, callback()). this function is made to make a pop-up window
and you can add callback function, which will be called when the second action confirm is made like in
You cannot pass any data through the
pop_up_choice(). And It will appear with the default text.
2 - _alert(massage, duration = 1000). Which is an enhanced alerter instead of the window.alert(massage), because window.alert(massage) is a sync process.
3 - _confirm_alert({subject, text, button}). It is like pop_up_choice(), but with no return,
with only one choice. Actually, you can say that it is a toggle alerter.
4 - _notify(massage, options = {}). It is a alert, but with different style, and with timer-progress bar.
Options Object has two properties. onHoverPause, which is the hover pause action. Its default is true Duration. And its default is 5000ms
5 - _log(command, callback()). Actually, it is one of the most incredible functions, you will ever see. It is like the header() function in php. You pass a certain command such as:
_log("Error: Invalid Input", () => {
_notify("Try resubmitting the form");
})Actually, there are no commands right now, maybe in the next versions. Also there are the wiki command, like:
_log("Error: Forbidden URL, wiki: https://mywebsite.com/support", () => {
_alert("Try in another time");
});Next, we have the animation functions
1 - _begin_animate(element, delay = 1). Which will animate the element to enter the screen. Just make that element hidden. And it will make anything. Because in the beggining of the animation, it will give the element high zIndex, block display, and low opacity. Then, it will animate it.
2 - _leave_animate(element, delay = 1). It is the opposite of _begin_animate.
Features
1 - Optional properties. Now, every single property is optional. Now, if you passed an empty data object for any function, it will work such as
_prompt({}, (txt) => {
console.log(txt)
});Also, it is recommended to pass through the data object
var data = {
subject: "Confirming",
text: "Please confirm the form",
button: "Ok",
}2 - Various Styles. You can customize your styles by passing different arguments to the data-animate-style attribute
for the body element
<!-- Example -->
<body data-animate-style="circles dark"></body>Actually, we have only those two arguments. We will add more in the next versions.