CSS: opacidade de transição no afastamento do mouse?

115 
.item:hover {
        zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.5;
        -webkit-transition: opacity .15s ease-in-out;
        -moz-transition: opacity .15s ease-in-out;
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out;
        transition: opacity .15s ease-in-out;
    }

Por que isso apenas anima a opacidade quando passo o mouse, mas não quando deixo o objeto com o mouse?

Demonstração aqui: http://jsfiddle.net/7uR8z/

​

css css-transitions mate
fonte
Eu uso o Safari e funciona perfeitamente mesmo quando deixo o objeto com o mouse ... Qual é o problema?
AleVale94
Não, não funciona para mim! A transição funciona quando eu coloco o cursor sobre a caixa vermelha! Ao sair da caixa vermelha com o mouse, ele "pula" de volta para a opacidade total - eu quero animar quando o mouse for removido também!
matt
Por que não usar o filtro ... caniuse.com/#search=filter
DevWL

Respostas:

202

Você está aplicando transições apenas à :hoverpseudoclasse e não ao próprio elemento.

.item {   
  height:200px;
  width:200px;
  background:red; 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.item:hover {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

Demo: http://jsfiddle.net/7uR8z/6/

Se você não deseja que a transição afete o mouse-overevento, mas apenas mouse-out, você pode desativar as transições para o :hoverestado:

.item:hover {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

Demo: http://jsfiddle.net/7uR8z/3/

Sampson
fonte
2

Consegui encontrar uma solução usando css / jQuery com a qual estou confortável. O problema original: eu tive que forçar a visibilidade a ser mostrada durante a animação, pois tenho elementos pendurados fora da área. Fazendo isso, grandes blocos de texto agora também ficam pendurados fora da área de conteúdo durante a animação.

A solução foi iniciar os principais elementos do texto com uma opacidade 0 e usar addClasspara injetar e fazer a transição para uma opacidade 1. Em seguida, removeClassclicar novamente.

Tenho certeza de que existe uma maneira totalmente jQquery de fazer isso. Eu simplesmente não sou o cara para fazer isso. :)

Então, em sua forma mais básica ...

.slideDown().addClass("load");
.slideUp().removeClass("load");

Obrigado pela ajuda de todos.

Sektion66
fonte
1 
$(window).scroll(function() {    
    $('.logo_container, .slogan').css({
        "opacity" : ".1",
        "transition" : "opacity .8s ease-in-out"
    });
});

Check the fiddle: http://jsfiddle.net/2k3hfwo0/2/

Peter Darmis
fonte