11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Effet de transition entre deux classes CSS

Bonjour,

J'ai un petit bout de code JS qui me permet de changer la <class> de mon <header> lorsque je scroll dans la fenêtre du navigateur. Le problème c'est que ce changement de <class> se fait sans transition. J'ai pourtant mis des transitions dans mon fichier CSS, dans les <class> de mon <header>.

Est-il possible, avec JS, de switcher entre deux classes CSS, tout en ayant des transitions ?

Merci d'avance.
Bonjour,
tu veux dire un changement doux étalé sur n secondes ?
Oui, c'est possible, je l'ai installé sur un site. À l'ouverture de la page d'accueil, le bandeau n'est pas présent et quand on descend sur la page il apparaît, progressivement. On peut bien sûr imaginer d'autres combinaisons. C'est transition-duration qu'il faut voir, mais un bout de code ou un lien serait le bienvenu.
Pour être clair...

J'ai d'un côté mon fichier CSS qui contient les deux styles du <header>, <header.notScrolled> et <header.scrolled>, avec chacun des propriétés différentes.

header.notScrolled {
propriété 1;
propriété 2;
...etc
}

header.scrolled {
propriété 1;
propriété 2;
...etc
}

De l'autre, j'ai ma page PHP avec à la fin mon <script> JS qui modifie la classe selon le niveau du scroll.

window.addEventListener('scroll', function(){
if (html.scrollTop > 200) {
header.style. = 'scrolled';
} else {
header.style. = 'notScrolled';
}
});

Le passage d'une classe à l'autre fonctionne sauf que je n'ai pas d'effet de transition entre ces deux classes. Je ne sais pas comment faire. Faut-il que j'agisse côté CSS ou plutôt côté JS dans ma page PHP ? C'est ça ma question. Et si quelqu'un pouvait m'orienter vers une solution sans coder à ma place bien sûr ce serait cool.
Modérateur
Salut,

Ca dépend un peu ce que sont les propriétés à animer.

Mais sinon le principe c'est de jouer avec les transitions CSS avec un état de base (notScrolled c'est l'état de base, pas besoin de classe spécifique) et un état modifié (scrolled) :

header {
    color: red;
    transition: color 500ms;
}
header.scrolled {
    color: blue;
}


Attention à bien mettre la transition dans l'état de base
et dans ton Js :

window.addEventListener('scroll', function(){
    if (html.scrollTop > 200) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
});


Voila en gros.

PS : Pense a utiliser les balises de code stp Smiley smile
Meilleure solution
Super, ça fonctionne ! Merci beaucoup pour l'aide.
Modifié par Javaslip (03 Jun 2021 - 10:48)
Re,

Par contre je viens de me rendre compte d'un petit comportement assez gênant. Si je modifie la propriété CSS 
height
d'un élément, forcément la fenêtre se rétrécie en hauteur lors du scroll, et malheureusement si je stagne un peu à un niveau de scroll vertical proche des 200px, JS fait tout sursauter puisque la transition s'effectue à 200px. Y a-t-il une solution pour contrer cet effet ? Ou bien faut-il plutôt que je fasse 2 
header
, un qui disparaît, et l'autre qui apparaît en fonction du scroll ?
Bon finalement j'ai réglé le problème. J'ai fait un header visible et fixe dans le DOM qui ne bouge pas, et un autre invisible, qui apparaît lorsque le premier n'est plus visible à l'écran. Beaucoup plus simple à gérer que les transitions des multitudes de propriétés d'un seul header.
Sujet clos
Aller à