IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Augmenter la durée d'une animation


Sujet :

JavaScript

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Juin 2011
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2011
    Messages : 14
    Par défaut Augmenter la durée d'une animation
    Bonjour , j'ai un dé très sympa , mais je souhaiterais le faire rouler un peu plus avant de s'arrêter sur sa face .

    j'ai tenté un transforme rotate avant le lancé mais ça ne fonctionne pas (ou alors qu'au 1er lancé).

    voici le fiddle

    https://jsfiddle.net/Lrgy96a8/


    si quelqu'un a une idée je prends .

    Merci d'avance

  2. #2
    Membre chevronné
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2022
    Messages
    289
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Industrie

    Informations forums :
    Inscription : Juin 2022
    Messages : 289
    Par défaut
    Bonjour,
    Très pratique le jsfidle

    Pour résumé j'ai fait trois petit changement :
    - CSS, ajout d'une classe qui fait rouler le Dé
    - Js : Ajout de la classe puis suppression au bout de x secondes

    Dans le css tu règle la vitesse pour faire rouler le dé , augmente la durée = baisse de la vitesse.
    Sinon tu peux aussi changer les rotates, j'ai juste pris les valeurs pour une face ( Dé 4 x=720 / y=810 ) que j'ai multiplié par 4. C'est pas obligé franchement, tu peux mettre ce que tu veux je pense

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    .spinning {
       transition: transform 1.5s ease-in-out !important;
        transform: translateZ(-100px) rotateY(3240deg) rotateX(2880deg) !important;
    }

    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
     
    $("#spin").click(function(e) {
        e.preventDefault();
        document.getElementById("dice").classList.add("spinning");
     
        rnd = Math.floor(Math.random() * 6 + 1);
        let x, y;
        switch (rnd) {
            case 1:
            x = 720;
            y = 810;
            break;
            case 6:
            x = 720;
            y = 990;
            break;
            default:
            x = 720 + (6 - rnd) * 90;
            y = 900;
            break;
        }
        setTimeout(function() {
            document.getElementById("dice").classList.remove("spinning");
        }, 1000); // Durée de la transition 
        $(".dice").css(
            "transform",
            "translateZ(-100px) rotateY(" + x + "deg) rotateX(" + y + "deg)"
            );
        });


    Cdt,

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Juin 2011
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2011
    Messages : 14
    Par défaut
    ce qui est surtout très pratique et très sympa ce sont les gens qui prennent le temps de répondre .
    Merci beaucoup donc pour ta réponse , effectivement la création d'une classe d'animation css et son activation en js est évidente une fois qu'on a lu ta proposition....
    merci encore

  4. #4
    Membre chevronné
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2022
    Messages
    289
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Industrie

    Informations forums :
    Inscription : Juin 2022
    Messages : 289
    Par défaut
    Tant que ca te convient it's good, pas de quoi .

    Tu peux le faire sans class aussi, c'est ce qui est bien avec js , tant que tu as de l'inspi tu peux bidouiller
    Oublie pas de cliquer sur si jamais ton problème est réglé

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,
    Citation Envoyé par gabi7756
    - Js : Ajout de la classe puis suppression au bout de x secondes
    il existe une façon élégante de faire cela et sans utiliser l'approximatif setTimeout, c'est d'utiliser l'événement transitionend déclenché en fin de transition. On a donc une « parfaite » synchronisation.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    const elDice = document.getElementById("dice");
    elDice.ontransitionend = (e) => {
      console.log("transition terminée après %fs", e.elapsedTime);
    }
    // le code déclencheur
    Ressource :

Discussions similaires

  1. Qui pourrait nous dire quel est le script utilisé ?
    Par ..::snake::.. dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 6
    Dernier message: 19/09/2007, 14h25
  2. Composant requête qui pourrait interroger un DataSet ?
    Par gduo200 dans le forum Bases de données
    Réponses: 8
    Dernier message: 05/09/2007, 03h30
  3. Qui pourrait expliquer mon pb de core dump ?
    Par seb9999 dans le forum C
    Réponses: 10
    Dernier message: 02/03/2007, 18h06
  4. [C#] Qui pourrait m'aider à faire marcher le WebService Amazon
    Par Cazaux-Moutou-Philippe dans le forum Windows Forms
    Réponses: 34
    Dernier message: 24/06/2006, 02h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo