Transição CSS3: transição diferente para * IN * e * OUT * (ou retornando do estado de transição)
Pergunta original ... código de trabalho atualizado abaixo:
Tenho uma imagem de carregamento que aparece durante um evento de carregamento do ajax. A imagem mostra / oculta adicionando ou removendo uma classe "loading" ao elemento body. Atualmente, a imagem de carregamento anima o tamanho do plano de fundo de 0 a 100% e diminui a opacidade (vice-versa para a transição de 'retorno'
O que eu quero realizar, no entanto, é fazer com que a transição do tamanho do plano de fundo ocorra instantaneamente (e não na transição) no desvanecimento, então:
Fade in: opacidade de 0 a 1 em .2s, tamanho do plano de fundo de 0 a 100% em .2sFade out: opacidade de 1 a 0 em .2s, tamanho de fundo de 100% a 0 deve acontecer instantaneamente
#loader {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
-moz-opacity: 0;
transition: all .2s ease-in-out
}
#loader .image {
width: 400px;
height: 138px;
display: block;
position: absolute;
z-index: 2000;
top: 50%;
left: 50%;
margin: 0;
background: url(assets/images/loading.png) no-repeat;
background-size: 0 0;
transition: all .2s ease-in-out;
-webkit-animation: pulse 400ms ease-out infinite alternate;
-moz-animation: pulse 400ms ease-out infinite alternate;
-o-animation: pulse 400ms ease-out infinite alternate;
animation: pulse 400ms ease-out infinite alternate
}
.loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)}
.loading #loader .image {
background-size: 100% 100%;
margin: -69px 0 0 -200px;
transition: opacity .2s ease-in-out
}
Alterei a propriedade de transição para esse seletor.loading #loader .image
para "opacidade" em vez de "todos", mas ainda realiza a transição do tamanho do plano de fund
Alguém sabe como conseguir as diferentes transições fade in e fade out descritas acima com o css3? Obrigado
Código de trabalho atualizado
O problema estava dividindo as propriedades individuais (margem, plano de fundo) em uma lista separada por vírgulas. Acredito que usando a transição: tudo o impedirá de fazer diferentesDENTR eFOR transições.
#loader {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
-moz-opacity: 0;
.transition(opacity,.4s);
}
#loader .image {
width: 400px;
height: 138px;
display: block;
position: absolute;
z-index: 2000;
top: 50%;
left: 50%;
margin: 0;
background: url(assets/images/loading.png) no-repeat;
background-size: 0 0;
-webkit-transition: margin .4s ease-in-out;
-moz-transition: margin .4s ease-in-out;
-o-transition: margin .4s ease-in-out;
-ms-transition: margin .4s ease-in-out;
transition: margin .4s ease-in-out;
-webkit-animation: pulse 400ms ease-out infinite alternate;
-moz-animation: pulse 400ms ease-out infinite alternate;
-o-animation: pulse 400ms ease-out infinite alternate;
animation: pulse 400ms ease-out infinite alternate
}
.loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)}
.loading #loader .image {
background-size: 100% 100%;
margin: -69px 0 0 -200px;
-webkit-transition: background .4s ease-in-out, margin .4s ease-in-out;
-moz-transition: background .4s ease-in-out, margin .4s ease-in-out;
-o-transition: background .4s ease-in-out, margin .4s ease-in-out;
-ms-transition: background .4s ease-in-out, margin .4s ease-in-out;
transition: background .4s ease-in-out, margin .4s ease-in-out;
}