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/


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/


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.


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.