JavaScript - ajouter des transition entre display:none et display:block

Je suis à l'aide de JavaScript pour basculer de notification comme ci-dessous.
Comment puis-je ajouter de la transition entre display: block et display: none;

Je ne veux pas ajouter une bibliothèque externe comme jQuery parce que je ne vais qu'à l'aide de la toggle effet seul.

JS:

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';
  }

});

CSS:

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

HTML:

<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 réaliser ce comme ci-dessous.

JS:

$(document).ready(function(){

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

});

});

CSS:

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

HTML:

<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 sur le bouton monte et descend progressivement pendant le #hint est en train de basculer, comme dans le jQuery exemple ci-dessus? Je ne veux pas le bouton pour sauter d'une position à une autre.

InformationsquelleAutor Abk | 2016-11-06

voir mon exemple ci-dessous:

JS:

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';
  }

});

CSS:

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;
}

HTML:

<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>

InformationsquelleAutor arhak

@vothaison suggestion: les transitions CSS

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

JS:

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
  }
 
});

CSS:

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

HTML:

<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>

À l'aide de CSS animations

JS:

var hint = document.getElementById('hint');
var btn = document.getElementById('btn_show');

btn.addEventListener('click', function(){
  hint.className = hint.className !== 'show' ? 'show' : 'hide';
  if (hint.className === 'show') {
    setTimeout(function(){
      hint.style.display = 'block';
    },0); //timed to occur immediately
  }
  if (hint.className === 'hide') {
    setTimeout(function(){
      hint.style.display = 'none';
    },700); //timed to match animation-duration
  }
});

CSS:

@-webkit-keyframes in {
0% { -webkit-transform: scale(0) rotate(12deg); opacity: 0; visibility: hidden;  }
100% { -webkit-transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
}
@keyframes in {
0% { transform: scale(0) rotate(12deg); opacity: 0; visibility: hidden;  }
100% { transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
}
@-webkit-keyframes out {
0% { -webkit-transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
100% { -webkit-transform: scale(0) rotate(-12deg); opacity: 0; visibility: hidden; }
}
@keyframes out {
0% { transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
100% { transform: scale(0) rotate(-12deg); opacity: 0; visibility: hidden;  }
}
#hint {
background: yellow;
color: red;
padding: 16px;
margin-bottom: 10px;
}
#hint.show {
-webkit-animation: in 700ms ease both;
animation: in 700ms ease both;
}
#hint.hide {
-webkit-animation: out 700ms ease both;
animation: out 700ms ease both;
}

HTML:

<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>

L'aide de vanille JavaScript

Il y a plusieurs façons de faire ce genre de chose avec de la vanille JavaScript, donc voici un croquis rapide d'une seule façon:

JS:

//you may need to polyfill requestAnimationFrame
var hint = document.getElementById('hint');
var btn = document.getElementById('btn_show');
btn.addEventListener('click', function(){
var ctr = 0;
hint.className = hint.className !== 'show' ? 'show' : 'hide';
if (hint.className === 'show') {
window.setTimeout(function(){
hint.style.display = 'block';
fadein();
},0); //do this asap        
}
if (hint.className === 'hide') {
fadeout();
window.setTimeout(function(){
hint.style.display = 'none';
},700); //time this to fit the animation
}
function fadein(){
hint.style.opacity = ctr !== 10 ? '0.'+ctr : 1;
hint.style.transform = ctr !== 10 ? 'scale('+('0.'+ctr)+')' : 'scale(1)';
ctr++;
if (ctr < 11)
requestAnimationFrame(fadein);
else
ctr = 0;
}
function fadeout(){
hint.style.opacity = 1 - ('0.'+ctr);
hint.style.transform = 'scale('+(1 - ('0.'+ctr))+')';
ctr++;
if (ctr < 10)
requestAnimationFrame(fadeout);
else
ctr = 0;
}
});

CSS:

#hint {
background: yellow;
color: red;
padding: 16px;
margin-bottom: 10px;
opacity: 0;
}

HTML:

<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>

Dire ce que vous voulez à propos de GreenSock, Velocity.js, jQuery, etc — ils ont tous tendance à banaliser ce processus de montrer et de cacher des choses. Pourquoi ne pas simplement emprunter de l'afficher et de masquer les fonctions de jQuery code source?

Merci pour la réponse. Vous avez donné à moi assez d'option pour sélectionner à partir, mais dans le jQuery exemple dans la question, avez-vous remarqué que le bouton se déplace vers le haut et vers le bas progressivement tandis que le #hint est en train de basculer?. Pouvez-vous m'aider à mettre cela en œuvre. Je ne veux pas le bouton saut à partir d'une position à une autre, comme dans la réponse que vous avez fournie.
vous devez modifier l'élément height plutôt que d'utiliser transform: scale(x) comme je l'ai fait dans les exemples.
Ok. Laissez-moi essayer.

InformationsquelleAutor amdouglas

3

Sans l'aide de css3 transition, vous pouvez utiliser js setInterval pour modifier certaines propriétés css de la div, tels que:
- Modifier l'opacité de 0 à 1
- Changer la hauteur de 0 à pleine hauteur
- Modifier la largeur de 0 à pleine largeur
D'abord, vous devriez avoir display: none; opacity: 0; height: 0; width: 0'

Alors vous devez changer display: none à display: block; avant d'utiliser setInterval pour modifier d'autres propriétés.

(Je suppose que vous savez comment faire pour cacher la div)

Vous pouvez également utiliser setTimeout(), avec un truc de récursive.
- pouvez-vous donner plus d'aide en ajoutant de l'extrait de l'extrait en question?
- Veuillez vérifier le code impressionnant de @amdouglas ci-dessus
InformationsquelleAutor vothaison

JS:

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';
}
});

CSS:

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

HTML:

<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 pense que l'utilisation de la visibilité sur l'affichage est une meilleure option

InformationsquelleAutor Aqueel Aboobacker VP

Essayer quelque chose comme cela:

JS:

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

CSS:

.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;
}

HTML:

<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>

InformationsquelleAutor skav3n

Salut je n'ai pas utiliser display: block à display:none mais changer l'opacité, de la hauteur et de remplissage au lieu
veuillez consulter celui-ci:

JS:

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');
}
});

CSS:

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;
}

HTML:

<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>

l'inconvénient de cette approche est que nous devons maintenir des voies de la div#astuce de la hauteur et de le modifier à l'aide de javascript, si nécessaire.

InformationsquelleAutor RizkiDPrast

-1

J'ai aussi essayé de faire cette

veuillez regarder si elle peut vous aider à

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;
}
});

pourquoi downvote, Est-il quelque chose de mal?
C'était peut-être downvoted parce que vous n'avez rien dit à propos de la display de la propriété.
ok...mais en js fiddle jsfiddle.net/z90kqrtg son travail

InformationsquelleAutor Rajesh Patel

Vous devez vous connecter pour publier un commentaire.