JOS Animation Library
v0.9.2)
Une bibliothèque d'animation simple et facile à utiliser pour les développeurs Web
Pages GIT · Démo de jeu · Rapport Bug · Fonction de demande
JOS-ANIMation, JavaScript on Scroll Animation Library est un package de bibliothèque d'animation simple et facile à utiliser pour ajouter instantanément une animation professionnelle à votre site Web. Il a été conçu pour me faciliter la vie lors du développement de sites Web et est livré avec des tonnes de fonctionnalités et est entièrement personnalisable. Il est léger et a une très petite empreinte. La meilleure partie de toutes est qu'il n'a pas de péage (* minimum) sur les performances.
Ce projet est actuellement développé par moi et la communauté de développement, vous pouvez donc vous attendre à plus de fonctionnalités et de mises à jour assez souvent.
A été inspiré par GSAP, bibliothèques AOS. Je voulais quelque chose de plus facile à utiliser, avec de grandes performances et je voulais améliorer la mise en œuvre. J'ai donc travaillé sur ce projet à partir de zéro.
N'hésitez pas à signaler un problème ou à demander une fonctionnalité dans ce référentiel :) et pour plus d'informations, consultez la page Web JOS.
< a
target =" _blank "
rel =" noopener noreferrer nofollow "
href =" https://github.com/jesvijonathan/JOS-Animation-Library "
>
< img
src =" https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library@master/res/badge/jos_github%20default.svg "
alt =" JOS-Animation "
style =" max-width: 100%; "
/> </ a > JOS v0.9.2 11 Nov 2023 Jesvi Jonathan
Vous avez la possibilité d'utiliser la dernière version de JOS à partir d'une variété de sources:
< script
src =" https://cdnjs.cloudflare.com/ajax/libs/jos-animation/0.9.2/jos.js "
integrity =" sha512-ZbNmgrMmWwQspNz6WQ1HnqLEPMXE4PyJBVnuc10e4gwJhrycze2IzjDQPx4CxkOBnUyt5wNCekdeTRJOe8J4WA== "
crossorigin =" anonymous "
referrerpolicy =" no-referrer "
> </ script > < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/jos.js " > </ script > < script src =" https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.js " > </ script >(ou)
< script src =" https://cdn.jsdelivr.net/npm/jos-animation/dist/jos.js " > </ script >(ou)
< script src =" https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/v0.9.2/jos.js " > </ script > < script src =" https://unpkg.com/jos-animation " > </ script >(ou)
< script src =" https://unpkg.com/[email protected]/dist/jos.js " > </ script > < script src =" https://raw.githubusercontent.com/jesvijonathan/JOS-Animation-Library/master/dist/jos.js " > </ script > Vous pouvez ajouter une version minifiée du script en remplaçant jos.js par jos.min.js dans la balise de script ci-dessus.
jos.js pour Basic. - jos.min.js pour une utilisation en production. - jos.debug.js pour le débogage avec une autre fonction à partir de v0.9 , par défaut jos.js ne vous oblige pas à ajouter la feuille de style jos.css , elle sera exportée avec le script. Mais vous pouvez toujours ajouter la feuille de style si vous le souhaitez pour une raison quelconque. ### Importation JOS 1. Installez JOS à l'aide de NPM (YARN ou PNPM): `` BASH NPM Installer JOS-Animation jos-animation@latest[email protected][email protected] Ce serait donc https://unpkg.com/jos-animation/@latest/dist/jos.js (Embed) pour la dernière version. ou jos-animation/@0.8.8/dist/jos.js (NPM Install) pour une version spécifique.
npm install jos-animation // import "jos-animation/dist/jos.css";
// Above is required only for v0.8.8 & below (or) if you want to overide jos by using style from the stylesheet
import JOS from "jos-animation" ;
// Other ways to import JOS
// import JOS from "jos-animation/dist/jos.js";
// import JOS from "jos-animation/dist/jos.min.js";
// import JOS from "jos-animation/dist/jos.debug.js"; // main.js
import { createApp } from "vue" ;
import { watch , nextTick } from "vue" ;
import JOS from "jos-animation" ; // jos-animation/dist/jos.debug.js
import App from "./App.vue" ;
const app = createApp ( App ) ;
app . mount ( "#app" ) ;
JOS . init ( ) ;
//JOS.version();
watch (
( ) => router . currentRoute . value ,
( ) => {
nextTick ( ( ) => {
JOS . refresh ( ) ;
} ) ;
}
) ;
// To observe elements after a route changeUtilisé dans: https://jos-animation.vercel.app/
Cet exemple ci-dessus pour vue.js est également applicable pour nuxt.js
// index.js
import JOS from "jos-animation/dist/jos.js" ;
onload = ( ) => {
const options = {
debugMode : true ,
animation : "flip" ,
duration : 0.7 ,
rootMargin : "0% 0% 0% 0%" ,
} ;
JOS . init ( options ) ;
//JOS.version();
} ;
function Main ( ) {
useEffect ( ( ) => {
JOS . refresh ( ) ;
} , [ ] ) ;
// To observe elements after a route change
return (
< React . StrictMode >
< App />
</ React . StrictMode >
) ;
}
ReactDOM . createRoot ( document . getElementById ( "root" ) ) . render ( < Main /> ) ;Utilisé dans: https://azzle.netlify.app
Cet exemple ci-dessus est pour react.js est également applicable pour next.js et préact.js
// app/layout.tsx
import jos from "jos-animation/dist/jos.js" ;
export default function RootLayout ( {
children ,
} : {
children : React . ReactNode ;
} ) {
const jos_options = {
debugMode : false ,
passive : true ,
animation : "fade" ,
duration : 0.4 ,
rootMargin : "20% 0% 30% 0%" ,
} ;
useEffect ( ( ) => {
jos . init ( jos_options ) ;
} , [ ] ) ; // Once
useEffect ( ( ) => {
jos . refresh ( ) ;
} ) ; // For every update
return ( ) ;
}
// To observe elements after a route changeUtilisé dans: https://bitspace-nextjs-jos.vercel.app
import { Component , OnInit , AfterViewChecked } from '@angular/core' ;
import JOS from 'jos-animation' ;
@ Component ( {
selector : 'app-root' ,
templateUrl : './app.component.html' ,
styleUrls : [ './app.component.css' ]
} )
export class AppComponent implements OnInit , AfterViewChecked {
ngOnInit ( ) : void {
JOS . init ( ) ; // Once
}
ngAfterViewChecked ( ) : void {
JOS . refresh ( ) ; // For every update
}
// ... rest of your code
}Vous pouvez consulter ce fil de discussion pour plus d'informations: Jos pour Angular
JOS.init(); Pour initialiser la bibliothèque avec des paramètres par défaut. <!-- Initialize JOS with default settings -->
< script >
JOS . init ( ) ;
</ script >JOS.init(options); Pour sureide les paramètres par défaut avec vos paramètres personnalisés. <!-- Global Parameters -->
< script >
JOS . init ( {
// disable: false, // Disable JOS globally | Values : 'true', 'false'
debugMode : true , // Enable JOS debug mode | Values : 'true', 'false'
passive : false , // Set the passive option for the scroll event listener | Values : 'true', 'false'
once : false , // Disable JOS after first animation | Values : 'true', 'false' || Int : 0-1000
animation : "fade" , // JOS global animation type | Values : 'fade', 'slide', 'zoom', 'flip', 'fade-right', 'fade-left', 'fade-up', 'fade-down', 'zoom-in-right', 'zoom-in-left', 'zoom-in-up', 'zoom-in-down', 'zoom-out-right', 'zoom-out-left', 'zoom-out-up', 'zoom-out-down', 'flip-right', 'flip-left', 'flip-up', 'flip-down, spin, revolve, stretch, "my-custom-animation"
// animationInverse: "static", // Set the animation type for the element when it is scrolled out of view | Values : 'fade', 'slide', 'zoom', 'flip', 'fade-right', 'fade-left', 'fade-up', 'fade-down', 'zoom-in-right', 'zoom-in-left', 'zoom-in-up', 'zoom-in-down', 'zoom-out-right', 'zoom-out-left', 'zoom-out-up', 'zoom-out-down', 'flip-right', 'flip-left', 'flip-up', 'flip-down, spin, revolve, stretch, "my-custom-animation"
timingFunction : "ease-in-out" , // JOS global timing function | Values : 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end', 'steps()', 'cubic-bezier()', 'my-custom-timing-function'
//mirror : false, // Set whether the element should animate back when scrolled out of view | Values : 'true', 'false'
threshold : 0 , // Set global the threshold for the element to be visible | Values : 0-1
delay : 0 , // Set global the delay for the animation to start | Values : 0,1,2,3,4,5
duration : 0.7 , // Set global the duration for the animation playback | Values : flota : 0-1 & int : 0,1,2,3,4,5
// startVisible: "true", // Set whether the element should animate when the page is loaded | Values : 'true', 'false' || MS : 0-10000
// scrollDirection: "down", // Set the scroll direction for the element to be visible | Values : 'up', 'down', 'none'
//scrollProgressDisable: true // disable or enable scroll callback function | Values : 'true', 'false'
// intersectionRatio: 0.4, // Set the intersection ratio between which the element should be visible | Values : 0-1 (automatically set)
// rootMargin_top: "0%", // Set by which percent the element should animate out (Recommended value between 10% to -30%)
// rootMargin_bottom: "-50%", // Set by which percent the element should animate out (Recommended value between -10% to -60%)
// rootMargin: "0% 0% -50% 0%", // Set the root margin for the element to be visible | Values : _% _% _% _% (automatically set)
} ) ;
</ script >class="jos" sur l'élément que vous souhaitez animer: <!-- JOS class is required to animate the element -->
< div class =" jos " > </ div >data-jos * pour personnaliser l'élément que vous souhaitez animer, <!-- JOS attributes are optional and will work without them (class="jos" is mandatory). these attributes can be used to customize the animation of the element -->
< div
class =" jos "
data-jos_animation =" zoom "
data-jos_once =" false "
data-jos_duration =" 0.4 "
data-jos_delay =" 0.1 "
data-jos_timing-function =" ease-in-out "
data-jos_mirror =" true "
data-jos_rootMargin =" 0% 0% -50% 0% "
data-jos_rootMargin_top =" -10% "
data-jos_rootMargin_bottom =" -50% "
data-jos_scrollDirection =" down "
data-jos_startVisible =" false "
data-jos_threshold =" 0.4 "
data-jos_passive =" false "
data-jos_invoke =" myCustomFunction "
data-jos_invoke_out =" myCustomFunction_onExit "
data-jos_scroll =" your_callbackFunction "
data-jos_anchor =" #elementID "
> </ div >Voir JOS accessoires pour des informations complètes concernant l'animation, les attributs et les options.
/* Custom animation class name starts with 'jos-' keyword followed by the animation name*/
. jos-my-custom-animation {
/* Set the initial state of the element */
}data-jos_animation à my-custom-animation : < div class =" jos " data-jos_animation =" my-custom-animation " > </ div >Exemple: animation personnalisée
/* Custom inverse animation class name starts with 'jos-' keyword followed by the animation name*/
. jos-my-custom-animation-inverse {
/* Set the initial state of the element */
}data-jos_animationInverse à my-custom-animation-inverse : < div class =" jos " data-jos_animationInverse =" my-custom-animation-inverse " > </ div >Ceci est particulièrement utile lorsque vous souhaitez animer un élément lorsqu'il est défilé de son Rootmargin , cela donne plus de personnalisation pour les belles animations.
Vous pouvez également utiliser une combinaison de data-jos_animation ("Aucun", "statique", sans transition, etc.) et des attributs data-jos_animationInverse pour créer une animation personnalisée.
Exemple: animation inverse personnalisée
/* Custom playable animation class name starts with 'jos-' keyword followed by the animation name*/
/* My Custom Playable Animation */
. jos-my-custom-animation {
transition : 1 s ;
animation : jos-my-custom-animation 1 s ease-in-out infinite;
transform : translateX ( 100 px );
}
/* Add Keyframes */
@keyframes jos-my-custom-animation {
0 % {
opacity : 1 ;
}
50 % {
transform : translateX ( -100 px );
}
}data-jos_animation à l'attribut my-custom-animation & data-jos_animationInverse à my-custom-animation-play : < div
class =" jos "
data-jos_animation =" my-custom-animation "
data-jos_animationinverse =" static "
> </ div > Ici, l'attribut data-jos_animationinverse est défini sur static pour empêcher l'élément d'animation hors de vue et pour le garder dans l'état final. L'animation jouable est déclenchée et commence à jouer lorsque l'élément est défilé en vue.
Exemple: animation jouable
/* Custom timing function attribute name starts with 'data-jos_timing_function' keyword & a custom name of your choice */
[ data-jos_timing_function = "myCustom-timingFunc" ] {
/* Set the timing of the element */
transition-timing-function : cubic-bezier ( 0.2 , 0.5 , 0.2 , 0.5 ) !important ;
}data-jos_timing-function à my-custom-timing-function : < div class =" jos " data-jos_timing-function =" myCustom-timingFunc " > </ div >Exemple: fonction de synchronisation personnalisée
id : <!-- My reference anchor element -->
< div id =" myElement " > </ div >data-jos_anchor , l'ID commençant par le suffixe # : <!-- My animated element -->
< div class =" jos " data-jos_anchor =" #myElement " > </ div > Cela déclenche l'animation lorsque l'élément myElement est défilé en vue.
Cette fonctionnalité est utile surtout lorsque vous souhaitez animer un élément qui est en position fixe .
Exemple: ancre
data-jos_scrollDirection : <!-- My animated element -->
< div class =" jos " data-jos_scrollDirection =" down " > </ div > Cela déclenche l'animation lorsque l'élément est défilé en vue de la direction vers down .
et vous pouvez faire de même pour une direction vers up .
Ceci est particulièrement utile lorsque vous souhaitez animer un élément lorsqu'il est défilé à partir d'une direction particulière.
Exemple: animation basée sur la direction
data-jos_startVisible : <!-- My animated element -->
< div class =" jos " data-jos_startVisible =" true " > </ div > Cela définit l'élément à visible lorsque la page est chargée. Vous pouvez y ajouter un délai en définissant la valeur en ms :
<!-- My animated element that is visible with a given timer/delay in ms-->
< div class =" jos " data-jos_startVisible =" 3000 " > </ div > Cela définit l'élément à visible lorsque la page est chargée après 3000 ms ou instantanément si la valeur est 0 (ou) true .
Cette fonctionnalité est utile surtout lorsque vous voulez un élément qui est en position fixe, ou qui est présent dans la page de destination d'être initialement dans un état visible sans animation.
Exemple: commencez visible
// Create a custom function
function myCustomFunction ( ) {
// Do something
}data-jos_invoke à myCustomFunction : < div class =" jos " data-jos_invoke =" myCustomFunction " > </ div >Cela déclenche la fonction myCustomFunction () lorsque l'élément est défilé en vue.
Vous pouvez utiliser l'attribut data-jos_invoke_out pour déclencher la fonction lorsque l'élément est défilé hors de vue.
Exemple: fonction personnalisée
data-jos_scroll : < div id =" elem1 " class =" jos " data-jos_scroll =" your_callbackFunction " >
Scroll Trigger Element
</ div > your_callbackFunction = ( element ) => {
// windowScrollProgress : element scroll pixel
console . log ( element . id , element . jos . windowScrollProgress ) ;
// scrollProgress : 0-1
element . style . opacity = element . jos . scrollProgress ;
// rootScrollProgress : +-0 to +-1
element . style . innerHTML = element . jos . rootScrollProgress ;
} ;Cela déclenche la fonction Your_CallbackFunction () lorsque l'élément est défilé. De cette façon, vous pouvez gérer la progression du défilement de l'élément.
Exemple: fonction personnalisée
data-jos_stagger avec la classe jos : < div
class =" jos parent_elem "
id =" stagger "
data-jos_stagger =" spin "
data-jos_staggerinverse =" none "
data-jos_stagger_anchor =" #elementID "
data-jos_stagger_sequence =" 0.1 "
data-jos_stagger_delay =" 0 "
data-jos_stagger_duration =" 0.4 "
data-jos_stagger_timing-function =" ease-in-out "
data-jos_stagger_mirror =" true "
data-jos_stagger_rootMargin =" 0% 0% -50% 0% "
data-jos_stagger_invoke =" myCustomFunction "
data-jos_stagger_invoke_out =" myCustomFunction_onExit "
data-jos_stagger_scroll =" your_callbackFunction "
data-jos_stagger_startVisible =" false "
data-jos_stagger_scrollDirection =" down "
data-jos_stagger_once =" false "
>
<!-- data-jos_stagger="true" # this attribute along with 'jos' class in parent element is Required/Must to enable staggering -->
<!-- data-jos_stagger_anchor="true" # auto sets parent element's id & uses it as a anchor's -->
<!-- Element 1 -->
< div class =" child_elem " > </ div >
<!-- Element 2 -->
< div class =" child_elem " > </ div >
<!-- Element 3 -->
< div class =" child_elem " > </ div >
<!-- Element n -->
</ div > L'attribut data-jos_stagger avec la classe jos dans l'élément parent est requis / doit permettre l'échec même si vous utilisez d'autres attributs.
data-jos_stagger = true serait automatiquement ASIGN ID pour l'élément parent et l'utiliserait comme ancre pour les éléments enfants.data-jos_stagger = #id utiliserait l'ID donné comme ancre pour les éléments enfants.data-jos_stagger_anchor rendez l'élément indépendant de l'élément parent. data-jos_stagger_seq est utilisé pour définir le retard entre chaque élément de la séquence (pour déclencher un après les autres) tandis que data-jos_stagger_delay Total Delay pour chaque élément dans son ensemble.
Exemple: animation stupéfiante
| Attribut | Taper | Défaut | Description | Valeurs |
|---|---|---|---|---|
| data-jos_animation | chaîne | disparaître | Définissez le type d'animation pour l'élément. | fade , slide , zoom , flip , fade-right , fade-up fade-left zoom-in-right fade-down zoom-in-left zoom-in-up , zoom-in-down zoom-out-right , zoom-out-left , zoom-out-down , flip-up flip-left zoom-out-up flip-down rotate rotate-right spin flip-right spin-right revolve revolve-right , stretch , stretch-vertical , my-custom-animation |
| data-jos_animationinverse | chaîne | statique | Définissez le type d'animation inverse pour l'élément. | fade , slide , zoom , flip , fade-right , fade-up fade-left zoom-in-right fade-down zoom-in-left zoom-in-up , zoom-in-down zoom-out-right , zoom-out-left , zoom-out-down , flip-up flip-left zoom-out-up flip-down rotate rotate-right spin flip-right spin-right revolve revolve-right , stretch , stretch-vertical , my-custom-animation |
| data-jos_once | booléen | FAUX | Définissez si l'élément ne doit animer qu'une seule fois. | true , false |
| data-jos_delay | int | 0 | Définissez le retard pour que l'animation commence. | (float: 0-1) et (int: 0, 1, 2, 3, 4, 5) |
| data-jos_duration | flotter | 0.4 | Définissez la durée de la lecture d'animation. | (float: 0-1) et (int: 0, 1, 2, 3, 4, 5) |
| Data-Jos_timing-Function | chaîne | facilité | Définissez la fonction de synchronisation de la lecture d'animation. | ease , ease-in , ease-out , ease-in-out , linear , step-start , step-end , steps(1, start) , steps(1, end) , cubic-bezier(0.1, 0.7, 1.0, 0.1) , my-custom-timingFunc |
| data-jos_invoke | chaîne | nul | Définissez la fonction à invoquer lorsque l'élément est défilé en vue. | function , myCustomFunction |
| data-jos_invoke_out | chaîne | nul | Définissez la fonction à invoquer lorsque l'élément est défilé hors de vue. | function , myCustomFunction |
| data-once | booléen et int | FAUX | Définissez si l'élément doit animer uniquement | (boolean: true, false) & (int: 0-infinity) |
| data-jos_rootmargin | chaîne | 0% -10% 0% -50% | Définit la marge pour un élément à animer dans une fenêtre lorsqu'il est défilé. | (string: "right% top% left% bottom%") |
| data-jos_rootmargin_top | chaîne | 0% | Définit la marge pour un élément à animer sur le dessus d'une fenêtre lorsqu'il est défilé. | (string: "top%") |
| data-jos_rootmargin_bottom | chaîne | 0% | Définit la marge pour un élément à animer au bas d'une fenêtre lorsqu'il est défilé. | (string: "bottom%") |
| data-jos_scrolldirection | chaîne | vers le bas | Définit la direction d'un élément pour animer sur la fenêtre Ina lorsqu'il est défilé. | (string: "up", "down", "none") |
| data-jos_startVisible | booléen et int | FAUX | Définissez si l'élément doit démarrer à l'état final lorsque la page est chargée (fonctionne également avec le retard). | (boolean: true, false) & (int: 0-10000 ms) |
| data-jos_anchor | chaîne | nul | Définit l'élément d'ancrage pour un élément à animer dans une fenêtre lorsqu'il est défilé. | (string: "#elementID") |
| data-jos_scroll | chaîne | nul | Définit la fonction de rappel pour un élément à animer dans une fenêtre lorsqu'il est défilé. | function , your_callbackFunction |
| data-jos_stagger | chaîne | disparaître | Définit l'animation Stagger pour un élément d'enfant Stagger à animer dans une fenêtre lorsqu'il est défilé. | string , fade |
| data-jos_staggerinverse | chaîne | statique | Définit l'animation inverse Stagger pour un élément d'enfant Stagger pour s'animation dans une fenêtre lorsqu'il est défilé (lecture de l'animation). | string , fade-play |
| data-jos_stagger_anchor | chaîne | nul | Définit l'élément d'ancrage pour un élément d'enfant Stagger à animer dans une fenêtre lorsqu'il est défilé. | string , #elementID |
| data-jos_stagger_seq | flotter | nul | Définit le retard de séquence pour un élément d'enfant Stagger à animer dans une fenêtre lorsqu'il est défilé. | float , 0-1 |
| data-jos_stagger_delay | flotter | nul | Définit le retard pour un élément d'enfant Stagger à animer dans une fenêtre lorsqu'il est défilé. | float , 0-1 |
| data-jos_stagger_duration | flotter | nul | Définit la durée d'un élément pour Child Stagger Animate dans une fenêtre lorsqu'il est défilé. | float , 0-1 |
| data-jos_stagger_timing-finction | chaîne | nul | Définit la fonction de synchronisation pour un élément d'enfant Stagger pour s'animation dans une fenêtre lorsqu'il est défilé. | string , ease |
| data-jos_stagger_mirror | booléen | nul | Définit l'animation miroir pour un élément d'enfant Stagger à animer dans une fenêtre lorsqu'il est défilé. | boolean , true , false |
| data-jos_stagger_rootmargin | chaîne | nul | Définit la marge pour un élément d'enfant Stagger à animer dans une fenêtre lorsqu'il est défilé. | (string: "right% top% left% bottom%") |
| data-jos_stagger_scrolldirection | chaîne | nul | Définit la direction d'un élément d'enfant Stagger pour animer sur la fenêtre Ina lorsqu'il est défilé. | (string: "up", "down", "none") |
| data-jos_stagger_startVisible | booléen et int | nul | Définissez si l'élément Child Stagger doit démarrer à l'état final lorsque la page est chargée (fonctionne également avec le retard). | (boolean: true, false) & (int: 0-10000 ms) |
| data-jos_stagger_once | booléen | nul | Définissez si l'élément ne doit animer qu'une seule ou n compter. | true , false , int |
| data-jos_stagger_scroll | chaîne | nul | Définit la fonction de rappel pour un enfant Stagger pour s'animation dans une fenêtre lorsqu'il est défilé. | function , your_callbackFunction |
| data-jos_stagger_invoke | chaîne | nul | Définissez la fonction à invoquer lorsque l'élément de décalage de l'enfant est défilé en vue. | function , myCustomFunction |
| data-jos_stagger_invoke_out | chaîne | nul | Définissez la fonction à invoquer lorsque l'élément de décalage de l'enfant est défilé hors de vue. | function , myCustomFunction |
| Méthode | Description | Paramètres |
|---|---|---|
| init () | Initialiser / réinitialiser Jos | Options = {} (voir jos.init (options)) |
| rafraîchir() | Actualiser Jos | aucun |
| arrêt() | Arrêter / pause jos | État = ( 0 - Arrête à l'état final, 1 - Arrêtez à l'état initial, -1 - pause à l'état actuel) |
| commencer() | Service de démarrage / reprendre JOS | état = ( 0 - Démarrage normal / complet, -1 - CV de l'état actuel) |
| détruire() | Détruisez l'instance JOS | State = ( 0 - Détruiser l'instance JOS excluant la feuille de style, 1 - Full Détruise avec Jos-Stylesheet) |
Une fois que vous avez terminé et que vous avez terminé de développer une version de JOS, vous pouvez le regrouper en utilisant la commande suivante de Project Root:
# JOS-Animation-Library
# |-dev
# |-dist
# |-bundler
# |-config
# |-export <-- Check this folder for the output files
# |-jos.css
# |-jos.js
# |...
# |-original
# |-bundle.sh <-- Run this file to bundle JOS
# ... # Change/Move to bundler directory
cd ./bundler
# Bundle the project
sh bundle.sh
# View the output files
ls ./exportPassé à des problèmes
Peut-être même le regrouper et le tester avant de le partager avec le monde;
( Me faire un ping si vous avez une démo;) )
