afficher/masquer l'élément à ajouter/removeClass avec CSS transition

J'aimerais afficher/masquer un élément avec addClass et removeClass fonction d'animation avec une transition CSS.
J'ai essayé de cette façon, mais quand je addClass "active" de l'affichage ne s'affiche pas.

.hidden {
  display: none;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;
}

.active {
  transition: display .5s ease;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;
}

#test {
  width: 100px;
  height: 40px;
  background: red;
}

$('#btn').on('click', function(){
   $('#test').toggleClass('active');
});

<div id="test" class="hidden">Hallo!</div>
<input type="button" id="btn" value="show/hide">

jsfiddle

Comment pourrais-je le faire? merci

Vous pouvez animer l'opacité, mais vous ne pouvez pas animer d'affichage. Vous devez animer l'opacité d'abord, et à la fin de l'animation, un changement de propriété d'affichage.
Cela peut également être utile: stackoverflow.com/questions/7302824

OriginalL'auteur Gus | 2015-03-20

4

Je pense que c'est mieux de le résoudre avec jquery, pas de transition css. Si vous voulez juste pour afficher et masquer un élément, vous pouvez utiliser jquery fadeIn et fadeOut sans aucune règle css.
```
$('#btn').on('click', function(){
   $('#test').fadeToggle("slow");
});
```
Voici la mise à jour de violon.

Pour plus d'informations sur fadeToggle, reportez-vous à ce lien.

C'est une excellente solution.
Heureux de vous aider.

OriginalL'auteur hamed
2

Vous avez besoin d'ajouter un peu de code css dans votre .classe active, le mettre dans la section css, voici la mise à jour violon :
```
display : block;
```
Votre solution, se cache et montre div sans transition aucune.

OriginalL'auteur Norlihazmey Ghazali
2

Vous devrez supprimer la classe hidden de la div, depuis cachés a aucun affichage qui l'empêche de s'afficher.

Ajouter ceci dans le JQuery à l'intérieur de onclick du Bouton.
```
 $('#test').removeClass('hidden');
```
Si je supprime la classe caché, je n'ai pas la transition

OriginalL'auteur Venkata Krishna

Voici une autre manière à l'aide de CSS:

Il n'est pas parfait, vous voulez mais plus proche:

.hidden {
    display:none;
     opacity:0;

}

.active {
    display: block;
    opacity:1;
  -webkit-animation-name: fadeIn;
-webkit-animation-duration: .5s;
animation-name: fadeIn;
animation-duration: .5s;
}

#test {
    width: 100px;
    height: 40px;
    background: red;
}

@-webkit-keyframes fadeIn {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0.3; }
60% { opacity: 0.5; }
80% { opacity: 0.9; }
100% { opacity: 1; }
}

@keyframes fadeIn {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0.3; }
60% { opacity: 0.5; }
80% { opacity: 0.9; }
100% { opacity: 1; }
}

Vérifier Le violon.

Espère que ça va aider.

OriginalL'auteur ketan

Essayez ceci:

$('#btn').on('click',function(){
var class= $('#test').attr('class').trim();
if(class === "hidden")
{
 $('#test').removeClass('hidden');
 $('#test').addClass('active');
}
else
{
 $('#test').removeClass('active');
 $('#test').addClass('hidden');
}
});

OriginalL'auteur Rohit Arora

0

Vous pouvez obtenir le même effet sans l'aide de longues css

Tout ce que vous avez à faire est d'ajouter un jquery
```
$('#btn').on('click', function () {
    $("#test").fadeToggle("slow", "linear")
});
```
cochez cette violon

OriginalL'auteur avnaveen
0

C'est un peu tard pour ce fil, mais cela peut être utile. Vous ne pouvez pas la transition de l'écran, mais vous peut transition de z-index. Ainsi, dans le CSS, définir votre élément que vous souhaitez afficher avec une opacité de 0, et de définir des z-index à -1, donc il ne fait pas le spectacle, indépendamment de la valeur d'affichage. Lorsque vous souhaitez afficher l'élément ajouter une classe que les transitions d'opacité 1 et z-index > 0:

Par exemple:
```
#myElement {
    z-index: -1;
    opacity:0;
    transition: all 2s;
}
#myElement.showme{
    z-index: 99;
    opacity:0;
    transition: all 2s;
}
```
pour afficher/masquer l'utilisation de javascript pour ajouter ou supprimer de la classe showme (jQuery ci-dessous):
```
$('#myElement').addClass('showme');  //fade myElement in
...
$('#myElement').removeClass('showme'); //fade out myElement 
```
au #myElement.showme vous dire opacity:1, n'est-ce pas?

OriginalL'auteur Gerry

Vous devez vous connecter pour publier un commentaire.