Animation CSS3 qui ne fonctionne pas dans une boucle javascript

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Jpe54
Messages : 15
Enregistré le : 10 mars 2017, 14:11

Animation CSS3 qui ne fonctionne pas dans une boucle javascript

Message par Jpe54 » 17 avr. 2019, 11:06

Bonjour,

j'ai développé pour une utilisation personnelle il y a une bonne trentaine d'année des albums HTML avec diaporama, qui suscitent toujours beaucoup d''intérêt pour ma progéniture.

Avec la venue de la photo numérique, ils ont juste à actualiser, dans un fichier Diaporama.js, le tableau précisant le dossier des photos. Son chargement génère un albumHTMl complet avec menu listant les noms des répertoires puis autorisant affichage de vignettes et visualisation possible en HD manuelle ou automatique.

Ces albums ont été remis au gout du jour en HTML5 et respect de la norme W3C, mais je souhaiterai aller plus loin en autorisant un certain nombre d'animation désormais accessible via CSS3 lors de l'affichage des photos.

Malheureusement les animations CSS3 ne fonctionnent uniquement que sur la première image et ne sont pas reconduite sur les suivantes.

Code : Tout sélectionner

        #MyIdDiv {
            animation: opac 0.8s
        }

        @keyframes opac {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
Certainement un mauvais codage d'un "getElément ?" DOM et sur lequel je sèche malgré différentes lecture, sur ce site et au format bouquin papier ;) … Le dinosaure au cerveau lent que je suis devenu à même du mal à comprendre comment se débarrasser via DOM de toutes instructions "document.write" passéistes !

Bref ! Voici le code HTML complet opérationnel - regroupant Html / Css / javascript - pour analyse du dysfonctionnement de l'animation passée en variable. Seules les images jpg sont absentes dans ce post...

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Diaporama HTML5 W3 CSS3</title>

    <style>

        body {
            background-color: #A9A9A9;
        }

        #Photos {
            margin-left: auto;
            margin-right: auto;
            display: block;
        }

        #MyIdDiv {
            animation: opac 0.8s
        }

        @keyframes opac {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }
    </style>

    <script>

        // ==========================================================================
        // ==========================================================================
        // Permet image horizontale ou verticale à la résolution maximale de l'écran
        // ==========================================================================

        function resize_Child(urlImage, mw, mh, ajustw, ajusth, idConteneur, MyPadding, MyAnimation) {

            mw = mw - ajustw;
            mh = mh - ajusth;

            var photo = new Image();

            // photo.src = urlImage;
            // Modif du code précédent pour contrer Bug Cache IE qui ne recharge pas image précédente en cache sur F5
            // ajout argument variable - inutilisé - dans url
            photo.src = urlImage + "?" + new Date().getTime();

            photo.onload = function () {
                // Taille originelle de la photo
                var imgW = photo.width;
                var imgH = photo.height;

                if (imgW > mw || imgH > mh) {

                    ratioH = mh / imgH;
                    ratioW = mw / imgW;

                    if (ratioH < ratioW || imgH == imgW) {
                        imgH = Math.floor((imgH * ratioH) - 30);
                        imgW = Math.floor((imgW * ratioH) - 10);
                    } else {
                        imgH = Math.floor((imgH * ratioW) - 30);
                        imgW = Math.floor((imgW * ratioW) - 10);
                    }

                    // Nouvelle Taille proportionnelle en fonction taille écran
                    photo.width = imgW
                    photo.height = imgH

                }

                // Afficher image avec <div id="Photos"></div> (SANS img src) en code HTML
                // document.getElementById(idConteneur).appendChild(photo);

                // Afficher image (AVEC img src) en code HTML
                document.getElementById(idConteneur).src = urlImage;

                // Construire éléments du cadre une fois image chargée pour éviter flash sous IE
                document.getElementById(idConteneur).style.width = imgW + "px";
                document.getElementById(idConteneur).style.height = imgH + "px";
                document.getElementById(idConteneur).style.padding = MyPadding + "px";
                document.getElementById(idConteneur).style.border = "2px solid #bbb";
                document.getElementById(idConteneur).style.background = "#F4F4F4";
                document.getElementById(idConteneur).style.color = "#777";
                document.getElementById(idConteneur).style.boxShadow = "5px 5px 5px #888";

                // ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
                // A REVOIR !
                // Ne lance pas animation code CSS3 sur les images suivantes...
                document.getElementById("MyIdDiv").style.animation = MyAnimation;
                // ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
            }
        }

        // ==========================================================================
        // ==========================================================================

        // Déterminer taille de la fenêtre d'affichage
        var fen = document.getElementsByTagName('html')[0];
        var MyEcranW = fen.clientWidth;
        var MyEcranH = fen.clientHeight;

        // Test détection première image réelle pour mode block du div une seule fois
        LoadOne = true;

        // ==========================================================================
        // ==========================================================================

        // ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
        // Variables test provisoire
        // 1- Tableau en attendant chargement depuis fichier externe Diapo.js
        var tabImgSave = ["000.jpg", "001.jpg", "005.jpg"];

        // 2- Valeur à véhiculer argument Url
        // Image de départ
        var DiaDebut = 0;
        // Temporisation affichage
        var MyDelai = 4;
        // ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

    </script>


</head>
<body onLoad="javascript:TempoDia(1);">

    <script>

        document.write('<div id="MyIdDiv" style="display: none">');
        document.write('<img id="Photos" src="' + tabImgSave[DiaDebut] + '">');
        document.write('</div>');


        // ============================================================
        // ============================================================
        // Diaporama
        function Diaporama() {

            // Appel de la fonction résize src image qui attend les variables suivantes :
            // resize_Child(urlImage, mw, mh, ajustw, ajusth, idConteneur, MyPadding, MyAnimation)
            resize_Child(tabImgSave[DiaDebut], MyEcranW, MyEcranH, 50, 50, "Photos", 15, "opac 0.8s");

            DiaDebut++;
            if (DiaDebut < tabImgSave.length) {
                TempoDia(MyDelai);
            }
        }

        function TempoDia(MySeconde) {
            if (MySeconde > 1 && LoadOne == true) {
                // A exécuter que lors de la première image
                LoadOne = false;
                document.getElementById("MyIdDiv").style.display = "block";
            }
            setTimeout(Diaporama, (MySeconde * 1000));
        }

    </script>

</body>
</html>

Nul doute que la bourde sera détectée et explicitée par l'un d'entre vous !

Un grand merci par avance. Le codage reste la science de la modestie et demande une remise en cause perpétuelle de ses propres connaissances !

Avatar du membre
webmaster
Administrateur du site
Messages : 64
Enregistré le : 28 févr. 2017, 15:19

Re: Animation CSS3 qui ne fonctionne pas dans une boucle javascript

Message par webmaster » 17 avr. 2019, 13:07

Bonjour,

Une fois que l'animation est lancée, il faut la réinitialiser et c'est pas évident.
C'est pour ca que j'ai modifié (sans optimiser) le script pour créer <img photo> à chaque mise à jour, au lieu d'utiliser toujours le même élément

J'espère que ca aidera

démo ici :
https://www.toutjavascript.com/user/diaporama.html
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Jpe54
Messages : 15
Enregistré le : 10 mars 2017, 14:11

Re: Animation CSS3 qui ne fonctionne pas dans une boucle javascript

Message par Jpe54 » 17 avr. 2019, 14:08

1000 Mercis pour ce coup de main et cette réponse rapide !

Je vais analyser vos modifications avec beaucoup d'intérêts et enfin comprendre pourquoi un removeChild avant un seul appendChild ne fonctionnait pas en l'état du <div> originel !

Avatar du membre
webmaster
Administrateur du site
Messages : 64
Enregistré le : 28 févr. 2017, 15:19

Re: Animation CSS3 qui ne fonctionne pas dans une boucle javascript

Message par webmaster » 17 avr. 2019, 14:19

J'ai aussi changé l'animation sur l'image : cela garantit avec la suppression création que l'animation se déclenche bien
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre