Vous pouvez faire en sorte que cela fonctionne de la manière naturelle que vous attendiez - en utilisant l'affichage - mais vous devez limiter le navigateur pour le faire fonctionner, en utilisant Javascript ou comme d'autres ont suggéré une astuce sophistiquée avec une balise à l'intérieur d'une autre. Je ne me soucie pas de la balise interne car elle complique davantage le CSS et les dimensions, alors voici la solution Javascript:
https://jsfiddle.net/b9chris/hweyecu4/17/
Commençant par une boîte comme:
<div id="box" class="hidden">Lorem</div>
Une boîte cachée.
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
Nous allons utiliser une astuce trouvée dans un Q / A connexe, en vérifiant offsetHeight pour étrangler le navigateur instantanément:
https://stackoverflow.com/a/16575811/176877
Tout d'abord, une bibliothèque formalisant l'astuce ci-dessus:
$.fn.noTrnsn = function () {
return this.each(function (i, tag) {
tag.style.transition = 'none';
});
};
$.fn.resumeTrnsn = function () {
return this.each(function (i, tag) {
tag.offsetHeight;
tag.style.transition = null;
});
};
Ensuite, nous allons l'utiliser pour révéler une boîte et l'ajouter en fondu:
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden'))
tag.noTrnsn().removeClass('hidden')
.css({ opacity: 0 })
.resumeTrnsn().css({ opacity: 1 });
else
tag.css({ opacity: 0 });
});
Cela fait fondre la boîte dans et hors. Ainsi, .noTrnsn()se éteint transitions, puis on enlève la hiddenclasse, qui fait osciller displayde nonesa valeur par défaut, block. Nous avons ensuite défini l'opacité sur 0 pour nous préparer à un fondu. Maintenant que nous avons réglé la scène, nous réactivons les transitions, avec .resumeTrnsn(). Et enfin, lancez la transition en définissant l'opacité sur 1.
Sans la bibliothèque, le changement à afficher et le changement à l'opacité nous auraient donné des résultats indésirables. Si nous supprimions simplement les appels de bibliothèque, nous n'obtiendrions aucune transition.
Notez que ce qui précède ne redéfinit pas l'affichage à la fin de l'animation de fondu. Nous pouvons devenir plus fantaisistes cependant. Faisons-le avec un fondu qui augmente à partir de 0.
Fantaisie!
https://jsfiddle.net/b9chris/hweyecu4/22/
#box {
transition: height 1s, opacity 1s;
}
Nous passons maintenant à la fois à la hauteur et à l'opacité. Notez que nous ne sommes pas réglage en hauteur, ce qui signifie qu'il est la valeur par défaut, auto. Conventionnellement, cela ne peut pas être effectué - le passage de l'auto à une valeur de pixel (comme 0) ne vous procurera aucune transition. Nous allons contourner cela avec la bibliothèque et une autre méthode de bibliothèque:
$.fn.wait = function (time, fn) {
if (time)
this.delay(time);
if (!fn)
return this;
var _this = this;
return this.queue(function (n) {
fn.call(_this);
n();
});
};
Il s'agit d'une méthode pratique qui nous permet de participer à la file d'attente fx / animation existante de jQuery, sans nécessiter le cadre d'animation qui est désormais exclu dans jQuery 3.x. Je ne vais pas expliquer comment fonctionne jQuery, mais il suffit de dire, la .queue()et la .stop()plomberie que jQuery fournit de l' aide nous empêchons nos animations de marcher sur l'autre.
Animons l'effet de glissement vers le bas.
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden')) {
// Open it
// Measure it
tag.stop().noTrnsn().removeClass('hidden').css({
opacity: 0, height: 'auto'
});
var h = tag.height();
tag.css({ height: 0 }).resumeTrnsn()
// Animate it
.css({ opacity: 1, height: h })
.wait(1000, function() {
tag.css({ height: 'auto' });
});
} else {
// Close it
// Measure it
var h = tag.noTrnsn().height();
tag.stop().css({ height: h })
.resumeTrnsn()
// Animate it
.css({ opacity: 0, height: 0 })
.wait(1000, function() {
tag.addClass('hidden');
});
}
});
Ce code commence par vérifier #boxet s'il est actuellement caché, par vérifier sa classe. Mais il accomplit davantage en utilisant l' wait()appel de bibliothèque, en ajoutant la hiddenclasse à la fin de l'animation de glissement / fondu, que vous vous attendriez à trouver si elle est en fait cachée - quelque chose que l'exemple plus simple ci-dessus ne pourrait pas faire. Cela se produit également pour permettre d'afficher / masquer l'élément encore et encore, ce qui était un bogue dans l'exemple précédent, car la classe cachée n'a jamais été restaurée.
Vous pouvez également voir les changements de CSS et de classe appelés .noTrnsn()pour définir généralement le décor des animations, y compris prendre des mesures, comme mesurer la hauteur finale #boxsans le montrer à l'utilisateur, avant d'appeler .resumeTrnsn(), et l'animer à partir de cet ensemble complet étape vers ses valeurs CSS d'objectif.
Ancienne réponse
https://jsfiddle.net/b9chris/hweyecu4/1/
Vous pouvez le faire passer en un clic avec:
function toggleTransition() {
var el = $("div.box1");
if (el.length) {
el[0].className = "box";
el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {
el[0].className = "box hidden";
});
} else {
el = $("div.box");
el[0].className = "box";
el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {
el[0].className = "box box1";
});
}
return el;
}
someTag.click(toggleTransition);
Le CSS est ce que vous devinez:
.hidden {
display: none;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
color: yellow;
font-size: 18px;
left: 20px;
top: 20px;
position: absolute;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(.2);
transform: scale(.2);
-webkit-transition: transform 2s;
transition: transform 2s;
}
.box1{
-webkit-transform: scale(1);
transform: scale(1);
}
La clé réduit la propriété d'affichage. En supprimant la classe cachée, puis en attendant 50 ms, puis en démarrant la transition via la classe ajoutée, nous la faisons apparaître puis nous nous développons comme nous le voulions, au lieu de simplement la faire apparaître sur l'écran sans aucune animation. La même chose se produit dans l'autre sens, sauf que nous attendons que l'animation soit terminée avant d'appliquer caché.
Remarque: j'abuse .animate(maxWidth)ici pour éviter les setTimeoutconditions de course. setTimeoutest rapide pour introduire des bogues cachés lorsque vous ou quelqu'un d'autre récupérez du code sans le savoir. .animate()peut facilement être tué avec .stop(). Je l'utilise simplement pour mettre un retard de 50 ms ou 2000 ms sur la file d'attente fx standard où il est facile de trouver / résoudre par d'autres codeurs en s'appuyant sur cela.