Você pode fazer com que isso funcione da maneira natural que você esperava - usando a exibição - mas você precisa acelerar o navegador para fazê-lo funcionar, usando Javascript ou outros sugeriram um truque sofisticado com uma tag dentro de outra. Não ligo para a tag interna, pois ela complica ainda mais o CSS e as dimensões, então aqui está a solução Javascript:
https://jsfiddle.net/b9chris/hweyecu4/17/
Começando com uma caixa como:
<div id="box" class="hidden">Lorem</div>
Uma caixa escondida.
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
Vamos usar um truque encontrado em um q / a relacionado, verificando offsetHeight para acelerar o navegador instantaneamente:
https://stackoverflow.com/a/16575811/176877
Primeiro, uma biblioteca que formaliza o truque acima:
$.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;
});
};
Em seguida, vamos usá-lo para revelar uma caixa e inseri-la em:
$('#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 });
});
Isso desbota e desbota a caixa. Assim,.noTrnsn() desliga transições, então remover a hiddenclasse, que vira displaya partir nonede seu padrão, block. Em seguida, definimos a opacidade como 0 para nos prepararmos para o desbotamento. Agora que montamos o cenário, ativamos as transições novamente .resumeTrnsn(). E, finalmente, inicie a transição configurando a opacidade para 1.
Sem a biblioteca, tanto a alteração a ser exibida quanto a opacidade teriam obtido resultados indesejáveis. Se simplesmente removêssemos as chamadas da biblioteca, não teríamos nenhuma transição.
Observe que as opções acima não definem a exibição para nenhuma novamente no final da animação fadeout. Podemos ficar mais extravagantes. Vamos fazer isso com um que desbota e cresce em altura a partir de 0.
Chique!
https://jsfiddle.net/b9chris/hweyecu4/22/
#box {
transition: height 1s, opacity 1s;
}
Agora estamos fazendo a transição de altura e opacidade. Observe que não estamos definindo a altura, o que significa que é o padrão auto,. Convencionalmente, não é possível fazer a transição - passar de automático para um valor de pixel (como 0) não fará a transição. Vamos contornar isso com a biblioteca e mais um método de biblioteca:
$.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();
});
};
Esse é um método de conveniência que nos permite participar da fila de animação / animação existente do jQuery, sem exigir nenhuma estrutura de animação que agora está excluída no jQuery 3.x. Não vou explicar como o jQuery funciona, mas basta dizer que o .queue()e.stop() encanamento que jQuery fornece ajuda-nos a prevenir nossas animações de pisar no outro.
Vamos animar o efeito deslizar para baixo.
$('#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');
});
}
});
Esse código começa verificando #boxe se está oculto no momento, verificando sua classe. Mas realiza mais usando a wait()chamada de biblioteca, adicionando ohidden classe no final da animação slideout / fade, que você esperaria encontrar se estivesse de fato oculta - algo que o exemplo mais simples acima não poderia fazer. Isso também permite exibir / ocultar o elemento repetidamente, o que foi um erro no exemplo anterior, porque a classe oculta nunca foi restaurada.
Você também pode ver as alterações de CSS e de classe sendo chamadas depois .noTrnsn()para definir o cenário das animações, incluindo a tomada de medidas, como medir qual será a altura final #boxsem mostrar isso ao usuário, antes de chamar .resumeTrnsn()e animar a partir desse conjunto completo estágio para seus valores CSS de meta.
Resposta antiga
https://jsfiddle.net/b9chris/hweyecu4/1/
Você pode fazer a transição ao clicar com:
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);
O CSS é o que você imagina:
.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);
}
A chave está limitando a propriedade de exibição. Ao remover a classe oculta e, em seguida, à espera de 50 ms, em seguida, iniciar a transição através da classe acrescentou, podemos obtê-lo para aparecer e, em seguida, expandir-se como queríamos, em vez de apenas blipping na tela sem qualquer animação. Similar ocorre de outra maneira, exceto que esperamos até que a animação termine antes de aplicar a ocultação.
Nota: Estou abusando .animate(maxWidth)aqui para evitar setTimeoutcondições de corrida. setTimeouté rápido para introduzir bugs ocultos quando você ou outra pessoa pega o código que não o conhece. .animate()pode ser facilmente morto com .stop(). Estou apenas usando-o para colocar um atraso de 50 ms ou 2000 ms na fila fx padrão, onde é fácil encontrar / resolver por outros codificadores construídos sobre isso.