Animations individuelles

Ces fonctionnalités correspondent à la fonctionnalité animation personnalisée de LibreOffice ou du Volet animation de PowerPoint
Imaginons que vous ayez deux éléments dans la même slide, mais vous ne voulez pas que le deuxième apparaisse tout de suite, vous voulez qu'il apparaisse quand vous cliquez. Pour cela, on va utiliser l'attribut cjs-animate.
Effet prédéfini
ColorJS est fourni avec des effets prédéfinis pour l'animation personnalisée. Par exemple le code suivant dans une slide :
Contenu de ma slide
<span class="fade" cjs-animate="1">Contenu caché au dépert</span>
Cela produira une apparition en fondu du span lors du premier clic. En effet la classe fade est fournie avec ColorJS et définit un effet de fondu. L'attribut cjs-animate="1" définit que l'élément va apparaitre au premier clic. Si vous changez sa valeur pour 2, par exemple, il apparaitra au deuxième clic.
Liste des effets prédéfinis
Tag
Effet produit
fade
Apparition de l'élément en fondu
simple
Apparition de l'élément en fondu avec un effet de translation depuis la droite vers la gauche
simpleleft
Apparition de l'élément en fondu avec un effet de translation depuis la gauche vers la droite
Apparitions personnalisées
Il est également possible de créer vos propres effets d'apparition. Pour cela il est nécessaire de comprendre le fonctionnement de ColorJS:
Lorsqu'un élément n'est pas encore affiché, il n'a pas de classe particulière, à part celles définies par l'utilisateur.
Lorsque c'est au tour de l'élément d'apparaître, le script lui ajoute la classe current. Ainsi les effets prédéfinis ne sont que des règles CSS avec et sans current
Créer votre effet
Pour créer un effet donc, il faut d'abord définir les règles CSS d'un élément lorsqu'il n'est pas encore visible. Nous allons ici créer un effet de fondu et de rotation. Il aura la classe rotate
On définit les règles lorsque l'élément est caché:
.rotate {
    opacity: 0;
    transform: rotate(-200deg);
    transition: all 0.5s ease-in-out;
}
Puis lorsqu'il est affiché, avec la classe current:
.rotate.current {
    opacity: 1;
    transform: rotate(0);
}
Maintenant on ajoute la classe correspondante à notre élément HTML, sans oublier l'attribut cjs-animate:
<div class="rotate" cjs-animate="1">Contenu caché au départ</div>
Le résultat final:
​

Transitions

Masque des diapositives

Last modified 3yr ago

Tag	Effet produit
`fade`	Apparition de l'élément en fondu
`simple`	Apparition de l'élément en fondu avec un effet de translation depuis la droite vers la gauche
`simpleleft`	Apparition de l'élément en fondu avec un effet de translation depuis la gauche vers la droite