2
votes

Comment exécuter plus d'une transition CSS en un clic sur un bouton?

Je construis un menu hamburger animé avec html css js. Je sais maintenant comment démarrer une transition css avec javascript. Voir https://jsfiddle.net/ralphsmit/byaLfox5/ . Mon problème maintenant est que je dois exécuter plus d'une transition en cliquant sur mon bouton. J'ai mis mon code ici https://jsfiddle.net/ralphsmit/v980ouwj/16/ a>.

Une brève explication de mon code. J'ai créé un bouton (par souci de clarté, je l'ai rendu vert avec une faible opacité) et lorsque ce bouton est cliqué, l'arrière-plan .dsgn-header-background apparaîtra. Maintenant, je veux aussi que les deux rectangles pour le menu s'animent en une croix et que les .dsgn-header-menu-open-menuitems se fondent également.

Ma question est, comment puis-je modifier ce js code, de sorte que plus d'une transition sera lancée? Toutes les transitions sont donc un élément différent. Vous trouverez le code complet dans le violon JS ci-dessus (n'hésitez pas à le modifier).

Javascript:

const background = document.querySelector('.dsgn-header-background');
const button = document.querySelector('.dsgn-header-button');

let open = false;

button.addEventListener('click', onClickPlay);

function onClickPlay(){
  if(background.classList.contains('on')){
    background.classList.remove('on');
  }else{
    background.classList.add('on');
  }
}

css css-transitions transition

2 commentaires

quelle classe vous voulez ajouter pour traverser dans le menu

.dsgn-header-rectangle-down doit devenir .dsgn-header-rectangle-down.on et .dsgn-header-rectangle-up doit devenir .dsgn-header-rectangle-down.on.

4 Réponses :

2
votes

Vérifiez ceci.

function onClickPlay(){
  if(background.classList.contains('on')){
      background.classList.remove('on');
      element.classList.remove('anotherClassWithDifferentTransitions');
  }else{
      background.classList.add('on');
      element.classList.add('anotherClassWithDifferentTransitions');
  }
}

Bravo!

5 commentaires

Salut, merci pour votre réponse rapide! Je veux dire en fait commencer les transitions avec un élément différent. Donc je ne veux pas dire la transition de deux propriétés à partir du même élément, mais la transition de quatre, cinq ou six éléments, tous avec leur propre transition. Désolé si ce n'était pas clair!

Hey checkout ma solution modifiée. Cela a-t-il un sens?

Si je veux ajouter quelques éléments supplémentaires, ajoutez simplement element.classList.remove ('anotherClassWithDifferentTransitio‌ ns'); sous le si et autrement?

Comme ceci: function onClickPlay () {if (background.classList.contains ('on')) {background.classList.remove ('on'); element.classList.remove ('anotherClassWithDifferent Transitio‌ ns'); elementtwo.classList.remove ('anotherClassWithDifferentTransi‌ tions'); } else {background.classList.add ('on'); element.classList.add ('anotherClassWithDifferentTransitions'); elementtwo.classList.remove ('anotherClassWithDifferentTransi‌ tions'); }}

oui ralph c'est tout! Seulement si vous voulez que la transition sur ces éléments se déclenche en même temps oui vous avez raison!

1
votes

Ajoutez les autres éléments à votre fonction onClickPlay comme vous l'avez fait avec la démo.

<div class="demo"><div>
<div class="demo2"><div>
<div class="buttondemo"><div>

.demo {
  width: 0;
  height: 100vh;
  background-color: black;
  position: absolute;
  right: 0;
  transition: width 4s;
}

.demo.on {
  width: 100vw;
}

.demo2 {
  width: 0;
  height: 50vh;
  background-color: red;
  position: absolute;
  right: 0;
  transition: width 8s;
}

.demo2.on {
  width: 100vw;
  background-color: yellow;
}

.buttondemo {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100px;
  height: 100px;
  background-color: green;
}

const demo = document.querySelector('.demo');
const demo2 = document.querySelector('.demo2');
const buttondemo = document.querySelector('.buttondemo');

let open = false;

buttondemo.addEventListener('click', onClickPlay);

function onClickPlay(){
	if(demo.classList.contains('on')){
            demo.classList.remove('on');
            demo2.classList.remove('on');
	} else {
            demo.classList.add('on');
            demo2.classList.add('on');
	}
}

0 commentaires

2
votes

Vous pouvez essayer ceci, les changements sont que j'ai ajouté 2 variables constantes supplémentaires qui s'ajoutent à la classe lorsque le menu s'ouvre et la supprime à la fermeture du menu.

  const background = document.querySelector('.dsgn-header-background');
 const button = document.querySelector('.dsgn-header-button');
const menu_up = document.querySelector('.dsgn-header-rectangle-up');
const menu_down = document.querySelector('.dsgn-header-rectangle-down');

let open = false;

button.addEventListener('click', onClickPlay);

function onClickPlay(){
  if(background.classList.contains('on')){
     background.classList.remove('on');
     menu_up.classList.remove('on');
     menu_down.classList.remove('on');
  }else{
    background.classList.add('on');
    menu_up.classList.add('on');
    menu_down.classList.add('on');

  }
}

j'espère que cela vous aidera.

1 commentaires

Merci de votre aide! C'était aussi la suggestion des autres! J'utilise maintenant ce code en effet. Merci de votre aide😊

2
votes

const content = document.querySelector('.content');
const button = document.querySelector('.dsgn-header-button');

function onClickPlay() {content.classList.toggle('on');}

button.addEventListener('click', onClickPlay);
fiddle: https://jsfiddle.net/s24mbakf/

0 commentaires