JavaScript – ajoute la transition entre l'affichage: aucun et affiche: bloc

J'utilise JavaScript pour activer la notification comme ci-dessous. Comment puis-je ajouter une transition entre l' display: block et display: none;

Je ne veux pas ajouter une bibliothèque externe comme jQuery parce que je n'utiliserais que l'effet de toggle seul.

 var btn = document.querySelector('button'); btn.addEventListener('click', function(){ var hint = document.getElementById('hint'); if(hint.style.display == 'none'){ hint.style.display = 'block'; } else{ hint.style.display = 'none'; } });

 div#hint{ background: gold; color: orangered; padding: .5em; font-weight: bold; }

 <div id='hint'> <p>This is some hint on how to be safe in this community </p> <p>This is another hint on how to be safe in this community </p> </div> <button> show hint </button>

Je sais que je peux utiliser jQuery pour obtenir cela comme ci-dessous.

 $(document).ready(function(){ $('button').click(function(){ $('#hint').toggle('slow'); }); });

 div#hint{ background: gold; color: orangered; padding: .5em; font-weight: bold; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='hint'> <p>This is some hint on how to be safe in this community </p> <p>This is another hint on how to be safe in this community </p> </div> <button> show hint </button>

Puis-je faire passer le bouton vers le haut et vers le bas progressivement tandis que le #hint est en train de basculer comme dans l'exemple jQuery ci-dessus? Je ne veux pas que le bouton passe d'un poste à l'autre.

Voir mon exemple ci-dessous:

 var btn = document.querySelector('button'); var hint = document.getElementById('hint'); var height = hint.clientHeight; var width = hint.clientWidth; console.log(width + 'x' + height); // initialize them (within hint.style) hint.style.height = height + 'px'; hint.style.width = width + 'px'; btn.addEventListener('click', function(){ if(hint.style.visibility == 'hidden'){ hint.style.visibility = 'visible'; //hint.style.opacity = '1'; hint.style.height = height + 'px'; hint.style.width = width + 'px'; hint.style.padding = '.5em'; } else{ hint.style.visibility = 'hidden'; //hint.style.opacity = '0'; hint.style.height = '0'; hint.style.width = '0'; hint.style.padding = '0'; } });

 div#hint{ background: gold; color: orangered; padding: .5em; box-sizing: border-box; overflow: hidden; font-weight: bold; transition: height 1s, width 1s, padding 1s, visibility 1s, opacity 0.5s ease-out; }

 <div id='hint'> <p>This is some hint on how to be safe in this community </p> <p>This is another hint on how to be safe in this community </p> </div> <button> show hint </button>

Suggestion de @volhaison: transitions CSS

Techniquement, @vothaison voulait utiliser setInterval par opposition à setTimeout , mais je ne vois pas le besoin de cela. C'est simplement plus de travail.

 var hint = document.getElementById('hint'); var btn = document.getElementById('btn_show'); btn.addEventListener('click', function(){ var ctr = 1; hint.className = hint.className !== 'show' ? 'show' : 'hide'; if (hint.className === 'show') { hint.style.display = 'block'; window.setTimeout(function(){ hint.style.opacity = 1; hint.style.transform = 'scale(1)'; },0); } if (hint.className === 'hide') { hint.style.opacity = 0; hint.style.transform = 'scale(0)'; window.setTimeout(function(){ hint.style.display = 'none'; },700); // timed to match animation-duration } });

 #hint { background: yellow; color: red; padding: 16px; margin-bottom: 10px; opacity: 0; transform: scale(0); transition: .6s ease opacity,.6s ease transform; }

 <div id="hint" style="display: none;"> <p>This is some hint on how to be safe in this community </p> <p>This is another hint on how to be safe in this community </p> </div> <button id="btn_show"> Show hint </button>

Sans utiliser la transition css3 , vous pouvez utiliser js setInterval pour modifier la propriété css de la div, par exemple:

Changer l'opacité de 0 à 1
Changer la hauteur de 0 à la hauteur totale
Changez la largeur de 0 à la largeur totale

Au départ, vous devriez display: none; opacity: 0; height: 0; width: 0' display: none; opacity: 0; height: 0; width: 0'

Ensuite, vous devez changer l' display: none pour display: block; Avant d'utiliser setInterval pour modifier d'autres propriétés.

(Je suppose que vous savez comment cacher le div)

Vous pouvez également utiliser setTimeout (), avec une astuce récursive.

 var btn = document.querySelector('button'); btn.addEventListener('click', function(){ var hint = document.getElementById('hint'); if(hint.style.visibility == 'hidden'){ hint.style.visibility = 'visible'; hint.style.opacity = '1'; } else{ hint.style.visibility = 'hidden'; hint.style.opacity = '0'; } });

 div#hint{ background: gold; color: orangered; padding: .5em; font-weight: bold; transition: visibility 1s, opacity 0.5s linear; }

 <div id='hint'> <p>This is some hint on how to be safe in this community </p> <p>This is another hint on how to be safe in this community </p> </div> <button> show hint </button>

Essayez quelque chose comme ceci:

 var btn = document.querySelector('button'); btn.addEventListener('click', function(){ var hint = document.getElementById('hint'); hint.classList.toggle("hide"); });

 .hint{ background: gold; color: orangered; padding: .5em; font-weight: bold; visibility: visible; opacity: 1; max-height: 500px; transition: visibility 0s, opacity 0.3s, max-height 0.6s linear; } .hide { visibility: hidden; opacity: 0; max-height: 0px; transition: max-height 0.3s, opacity 0.3s, visibility 0.3s linear; }

 <div id='hint' class="hint"> <p>This is some hint on how to be safe in this community </p> <p>This is another hint on how to be safe in this community </p> </div> <button> show hint </button>

Bonjour je n'utilise pas l' affichage: blocage à afficher: aucun, mais changer l'opacité, la hauteur et le rembourrage à la place, révisez celui-ci:

 var btn = document.querySelector('button'); btn.addEventListener('click', function() { var hint = document.getElementById('hint'); if (hint.classList.contains('h-hide')) { hint.classList.remove('h-hide'); } else { hint.classList.add('h-hide'); } });

 div#hint { display: block; background: gold; color: orangered; padding: .5em; font-weight: bold; transition: .5s all linear; opacity: 1; overflow: hidden; height: 100px; } #hint.h-hide { padding: 0; opacity: .25; height: 0; }

 <div id='hint'> <p>This is some hint on how to be safe in this community</p> <p>This is another hint on how to be safe in this community</p> </div> <button>show hint</button>

J'ai également essayé de le faire
Regardez s'il vous plait

 var btn = document.querySelector('button'); var hint = document.getElementById('hint'); hint.style.opacity = 1; hint.style.transition = "opacity 1s"; btn.addEventListener('click', function(){ if(hint.style.opacity == 0 || hint.style.opacity==''){ hint.style.opacity = 1; } else{ hint.style.opacity = 0; } });