clignotement à homogénéiser

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu clignotement à homogénéiser

Message par photoclic Lun 21 Mar 2022 - 19:47

Bonjour à tous,

J'ai 2 scripts permettant le clignotement.

Code:
//clignotement quand nouveau MP
$(function(){
$('img#i_icon_mini_new_message').closest('a.mainmenu').addClass('M14_blink');
 });
function M14_blink (){
$('.M14_blink').animate({opacity:0},400).animate({opacity:1},100);}
$(document).ready(function(){
setInterval('M14_blink()',1600);
});   

//clignotement quand nouveau Message
$(function(){
        $('img[alt^="Voir le message le plus"]').closest('a').addClass('M14_Blink');
        $('.M14_Blink').each(function() {
        var elem = $(this);
        setInterval(function()
        {
        if
        (elem.css('visibility') == 'hidden')         
        {
        elem.css('visibility', 'visible');
        }
        else
        {
        elem.css('visibility', 'hidden'); 
        } 
        }, 900);
        });
        });

Le 1ier fait clignoter le texte nouveau message quand il y en a 1, le second fait clignoter la petite icone quand il y a un nouveau message.

Serait-il possible de modifier le second code pour qu'il se comporte comme le 1ier au niveau du clignotement?
(Le temps d'extinction du second est trop long).

les 2 codes peuvent peut-être aussi être regroupés.

Merci pour votre aide.

Merci pour votre aide
photoclic

photoclic
Membre habitué

Masculin
Messages : 1162
Inscrit(e) le : 20/11/2015

Voir le profil de l'utilisateur http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: clignotement à homogénéiser

Message par Toryudo Mar 22 Mar 2022 - 8:42

Bonjour !
Alors justement, profitons-en pour nous débarrasser d'un peu de JavaScript / jQuery au passage pour le remplacer par du CSS.
En général, si on peut éviter de faire des animations en JavaScript, c'est toujours mieux ! Et ça va nous permettre de combiner les deux animations en un seul CSS, donc gain de performance et meilleure logique. Voici le CSS à mettre dans la feuille de style :
Code:
.css_blink {
   animation: 1600ms linear infinite CSS_blink;
}
@keyframes CSS_blink {
   0% { opacity: 1; }
   25% { opacity: 0; }
   30% { opacity: 1; }
}

Et voici ce qu'il reste dans le JavaScript (j'ai peut-être trop coupé, mais je pense que c'est bon) :
Code:
//clignotement quand nouveau MP et nouveau message
$(function(){
   $('img#i_icon_mini_new_message, img[alt^="Voir le message le plus"]').closest('a').addClass('css_blink');
});

L'animation est très très légèrement différente, parce que 25% de 1600ms = 400ms comme avant, mais 30% de 1600ms = 80ms plutôt que 100ms... ça veut dire qu'il passe de opacity 0 à opacity 1 20ms plus vite qu'avant. C'est parce que j'aime les pourcentages précis, pas d'autre raison (je suis un peu fou sur les bords, faut pas faire attention).
Toryudo

Toryudo
****

Masculin
Messages : 368
Inscrit(e) le : 31/03/2020

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: clignotement à homogénéiser

Message par photoclic Mar 22 Mar 2022 - 10:26

Bonjour Toryudo,

Merci pour ton aide.

C'est en place, mais je n'ai pas de clignotement.

Amitiés.
photoclic

photoclic
Membre habitué

Masculin
Messages : 1162
Inscrit(e) le : 20/11/2015

Voir le profil de l'utilisateur http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: clignotement à homogénéiser

Message par Toryudo Mar 22 Mar 2022 - 12:42

Hm, quand je regarde ce qu'il y a dans le CSS, je ne trouve que ça :
Code:
.css_blink{animation:1600ms linear infinite CSS_blink}25%{opacity:0}30%{opacity:1}

J'ai l'impression qu'il y a un problème avec le fait de mettre l'option "Optimiser votre CSS" à Oui. Si je mets à Non, ça marche, si je mets à Oui, ça ne marche pas. C'est comme si la partie "@keyframes CSS_blink {" était effacée par l'optimisation. Je demande !
Toryudo

Toryudo
****

Masculin
Messages : 368
Inscrit(e) le : 31/03/2020

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: clignotement à homogénéiser

Message par photoclic Mar 22 Mar 2022 - 13:29

Ok. Merci pour le retour.

En effet quand je mets "Non" à "Optimiser le css de base" ça marche.
photoclic

photoclic
Membre habitué

Masculin
Messages : 1162
Inscrit(e) le : 20/11/2015

Voir le profil de l'utilisateur http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: clignotement à homogénéiser

Message par photoclic Mar 22 Mar 2022 - 23:24

N'étant pas certain qu'il y ait une solution au pb css, j'ai essayé de regrouper ainsi en attendant; ça semble aller:
Code:

$(function(){
  $('img#i_icon_mini_new_message, img[alt^="Voir le message le plus"]').closest('a').addClass('M14_blink');
 });
function M14_blink (){
$('.M14_blink').animate({opacity:0},400).animate({opacity:1},100);}
$(document).ready(function(){
setInterval('M14_blink()',1600);
});
photoclic

photoclic
Membre habitué

Masculin
Messages : 1162
Inscrit(e) le : 20/11/2015

Voir le profil de l'utilisateur http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: clignotement à homogénéiser

Message par chattigre Mer 23 Mar 2022 - 12:41

Coucou,

En effet l'optimisation CSS est connue pour faire planter beaucoup des codes contenant des espaces indispensables à sa bonne interprétation, comme ici la structure du contenu de la propriété animation

Dès que l'on sort d'un CSS assez "basique", la désactivation de l'optimisation est nécessaire (et son impact reste relativement limité) Smile

Bonne journée !
chattigre

chattigre
Membre actif

Masculin
Messages : 2030
Inscrit(e) le : 17/04/2019

Voir le profil de l'utilisateur https://test1-chattigre.forumactif.fr
chattigre a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: clignotement à homogénéiser

Message par Toryudo Mer 23 Mar 2022 - 15:02

Courage aux devs, je sens que ça va être compliqué cette histoire bounce
Toryudo

Toryudo
****

Masculin
Messages : 368
Inscrit(e) le : 31/03/2020

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: clignotement à homogénéiser

Message par chattigre Mer 23 Mar 2022 - 18:53

Toryudo a écrit:Courage aux devs, je sens que ça va être compliqué cette histoire bounce
Re,

Justement, depuis le temps (il y a même des tutos où c'est mentionné), je doute que une solution parfaite soit trouvée, à moins de reprendre le système de minification (presque) entièrement ?... En tout cas, l'existence de cette option désactivable a justement pour but de permettre des choses non prises en charge par le mécanisme.

Mais un correctif pour le rendre plus complet (déjà en laissant les espaces non superflus alors que là beaucoup d'espaces utiles sont supprimés ça règlerait une partie du problème...) serait bienvenu en effet Smile
chattigre

chattigre
Membre actif

Masculin
Messages : 2030
Inscrit(e) le : 17/04/2019

Voir le profil de l'utilisateur https://test1-chattigre.forumactif.fr
chattigre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: clignotement à homogénéiser

Message par photoclic Mer 23 Mar 2022 - 21:11

Bonsoir chattigre et Toryudo,

Le problème css semble en effet pas évident à solutionner sur le court terme.
Je vais donc garder et mettre de coté le traitement de ce sujet en css et en attente au cas où
et vais laisser le JS qui semble fonctionner.

Je vous remercie tous les 2 pour votre implication.

je passe en résolu.
photoclic

photoclic
Membre habitué

Masculin
Messages : 1162
Inscrit(e) le : 20/11/2015

Voir le profil de l'utilisateur http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: clignotement à homogénéiser

Message par chattigre Mer 23 Mar 2022 - 21:40

Bonjour,

Désactiver l'optimisation du CSS ne l'a pas rendu fonctionnel ? What's happen ?!?

Cette option est un plus, mais n'est absolument pas indispensable, d'ailleurs beaucoup de forums au style complexe la désactivent pour ces raisons... Wink

PS : Et vu le nombre de JS qu'il y a sur le forum, on en arrive à un temps d'exécution qui rend le CSS  plus préférable si possible Wink

Bonne soirée
chattigre

chattigre
Membre actif

Masculin
Messages : 2030
Inscrit(e) le : 17/04/2019

Voir le profil de l'utilisateur https://test1-chattigre.forumactif.fr
chattigre a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: clignotement à homogénéiser

Message par Luzz Jeu 24 Mar 2022 - 14:43

Bonjour,

Merci de vos signalements concernant ce problème !

Nous venons de mettre à jour la librairie d'optimisation du CSS. Cela devrait résoudre le problème initial constaté avec le code de @Toryudo (et tous les autres du même type Smile ).

Bonne journée à tous !
Luzz

Luzz
Adminactive
Adminactive

Autre / Ne pas divulguer
Messages : 2835
Inscrit(e) le : 25/10/2007

Voir le profil de l'utilisateur https://forum.forumactif.com
Luzz a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum