CSS: непрозрачность перехода при отключении мыши?

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;
    }

Почему это анимирует непрозрачность только при наведении курсора, но не когда я оставляю объект с помощью мыши?

Демо здесь: http://jsfiddle.net/7uR8z/

css css-transitions матовый
источник

Я использую Safari, и он отлично работает, даже когда я оставляю объект с мышью ... В чем проблема?

AleVale94

Нет, у меня не работает! Переход работает при наведении курсора на красную рамку! Когда красный прямоугольник покидает мышью, он "перескакивает" обратно в полную непрозрачность - я хочу, чтобы он анимировался и при отключении мыши!

Мэтт

Почему бы не использовать фильтр ... caniuse.com/#search=filter

DevWL

202

Вы применяете переходы только к :hoverпсевдоклассу, а не к самому элементу.

.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;
}

Демо: http://jsfiddle.net/7uR8z/6/

Если вы не хотите, чтобы переход влиял на mouse-overсобытие, а только mouse-out, вы можете отключить переходы для :hoverсостояния:

.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;
}

Демо: http://jsfiddle.net/7uR8z/3/

Сэмпсон
источник

2

Мне удалось найти решение с использованием css / jQuery, которое мне удобно. Исходная проблема: мне пришлось принудительно отображать видимость во время анимации, поскольку у меня есть элементы, висящие за пределами области. При этом большие блоки текста теперь также висят вне области содержимого во время анимации.

Решением было начать основные текстовые элементы с непрозрачностью 0 и использовать addClassдля вставки и перехода к непрозрачности 1. Затем removeClassпри повторном нажатии.

Я уверен, что это можно сделать с помощью jQquery. Просто я не тот парень, чтобы это делать. :)

Итак, в самой простой форме ...

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

Спасибо всем за помощь.

Sektion66
источник

1

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

Проверьте скрипку: http://jsfiddle.net/2k3hfwo0/2/

Питер Дармис
источник

CSS: непрозрачность перехода при отключении мыши?

Ответы: