Faire disparaitre un bouton aprés avoir clické dessus

Romain Barbason
Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

J'utilise une keyframe jouant sur son opacité pour le faire disparaitre,j'essaye aussi d'autre chose comme display ou visibility mais ils ne marchent pas comme je veux

@-webkit-keyframes test {

  0% 
  {
    opacity: 1;
  }
  50%
  {
    opacity: 0.5;
  } 
  100%
  {
    opacity: 0;
    display: none;
    visibility: hidden;
  }
}
button {
    transition-property: opacity;
    transition-property: display;
    transition-property: visibility;
    transition-duration: 0.000000001s;
    animation-fill-mode: forwards;
    display: block;
}
button:active , button:visited , button:focus , button:link , button:out-of-range , button:target , button:disabled , button:checked 

{
animation: test 0.000000001s;
opacity: 0;
animation-fill-mode: forwards;
}

Je voudrais pouvoir faire disparaitre définitivement le bouton en clickant dessus juste une fois

J'ai réussi a le faire disparaitre en maintenant enfoncé clic gauche sur le bouton mais quand je clicke ailleurs ils réapparait
Une solution pls?D; Merci

10 réponses

Florian LE GARS
Réponse acceptée

Quelque chose dans ce style devrait pouvoir t'aider, à toi de l'adapter après si tu souhaites le réutiliser pour tous tes boutons ! :)

var button = document.getElementsByTagName('button')[0];
button.addEventListener("click", function () {
  button.style.opacity = 0;
});

Exemple : https://codepen.io/anon/pen/ZVwzWq

Florian LE GARS
Réponse acceptée

Des cours Javascript oui il y en a tu pourras en trouver sur le site :)
Si je met document.getElementsByTagName('button')[0] c'est parce que la méthode getElementsByTagName() retourne une liste des éléments (ici la balise button) et que dans ce cas précis c'est seulement le premier qui t'intéresses. Si tu veux te documenter un petit peu tu peux aller voir ici.
En éspérant t'avoir aidé !

Romain Barbason
Auteur

C'est fait ! https://codepen.io/Le_Belge/pen/PXXgGo
et j'ai pris ce chiffre la pour faire ca rapidement mais j'ai pris ca au moment ou je testait tous et n'importe quoi tkt x)

Florian LE GARS

Salut,
As-tu essayé de passer par du javascript ou souhaites-tu absolument le faire en css ?

Romain Barbason
Auteur

J'ai un peu essayé en javascript mais je vois pas du tous comment faire :/ mais ca m'est égale(du moment que ca marche) A la limite si t'as un lien vers un cours spécifiquement pour ca je dis pas non ;)

Romain Barbason
Auteur

Je vais analyser et comprendre ca,ca marche,merci beaucoup mec!;D

Romain Barbason
Auteur

Au passage y aurait pas un cours qui explique ca?Je suis nouveau sur grafikart avant j'allais plus sur openclassroom ^^

Romain Barbason
Auteur

Juste pourquoi tu mets un "[0]"?

Romain Barbason
Auteur

Une fois exporté le code ne marche pas,normal?

Romain Barbason
Auteur

Merci beaucoup!;D