Переход CSS с видимостью не работает

Question

В приведенной ниже скрипте у меня есть переход на видимость и непрозрачность отдельно. Последний работает, но первый не делает. Более того, в случае видимости время перехода интерпретируется как задержка при наведении. Бывает и в Chrome & Firefox. Это ошибка?

http://jsfiddle.net/0r218mdo/3/

Случай 1:

#inner{ 
    visibility:hidden; 
    transition:visibility 1000ms; 
} 
#outer:hover #inner{ 
    visibility:visible; 
} 

Случай 2:

#inner1{ 
    opacity:0; 
    transition:opacity 1000ms; 
} 
#outer1:hover #inner1{ 
    opacity:1; 
} 

Answer 1

Это не ошибка - вы можете только переход на порядковых/вычисляемых свойствах (легкий путь думать об этом - любое свойство с числовым значением начала и конца номера. Хотя есть несколько исключений).

Это связано с тем, что переходы выполняются путем вычисления ключевых кадров между двумя значениями значений и создания анимации путем экстраполяции промежуточных сумм.

visibility в этом случае является двоичной установкой (видимой/скрытой), поэтому по истечении времени перехода свойство просто переключает состояние, вы видите это как задержку, но на самом деле его можно рассматривать как окончательный ключевой кадр (промежуточные ключевые слова, которые не были рассчитаны (что составляет значения между скрытыми/видимыми? Непрозрачность? Измерение? Поскольку оно не является явным, они не вычисляются).

opacity - это значение (0-1), поэтому ключевые кадры могут быть рассчитаны в течение предоставленной продолжительности.

Список transitionable (Animatable) свойства могут быть найдены here

Answer 2

Видимость анимируемым. Проверьте это сообщение в блоге об этом: http://www.greywyvern.com/?post=337

Вы можете увидеть здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Допустим, у вас есть меню, которое вы хотите, чтобы исчезать и исчезать, на наведению мыши. Если вы используете только opacity:0, ваше прозрачное меню все равно будет присутствовать, и оно будет оживлять, когда вы наведете невидимую область. Но если добавить visibility:hidden, вы можете устранить эту проблему:

div { 
 
    width:100px; 
 
    height:20px; 
 
} 
 
.menu { 
 
    visibility:hidden; 
 
    opacity:0; 
 
    transition:visibility 0.3s linear,opacity 0.3s linear; 
 
    
 
    background:#eee; 
 
    width:100px; 
 
    margin:0; 
 
    padding:5px; 
 
    list-style:none; 
 
} 
 
div:hover > .menu { 
 
    visibility:visible; 
 
    opacity:1; 
 
}

<div> 
 
    <a href="#">Open Menu</a> 
 
    <ul class="menu"> 
 
    <li><a href="#">Item</a></li> 
 
    <li><a href="#">Item</a></li> 
 
    <li><a href="#">Item</a></li> 
 
    </ul> 
 
</div>

Answer 3

Видимость является анимируемым свойство в соответствии со спецификацией, но переходы по видимости не работают постепенно, как можно было бы ожидать. Вместо этого переходы на задержку видимости скрывают элемент. С другой стороны, создание видимого элемента работает немедленно. Это , поскольку он определяется спецификацией (в случае функции синхронизации по умолчанию) и как он реализован в браузерах.

Это также полезное поведение, поскольку на самом деле можно представить различные визуальные эффекты, чтобы скрыть элемент. Затухание элемента - это только один вид визуального эффекта, который задается с использованием непрозрачности. Другие визуальные эффекты могут удалять элемент, например,свойство преобразования, также см. http://taccgl.org/blog/css-transition-visibility.html

Часто полезно сочетать переход непрозрачности с переходом на видимость! Хотя непрозрачность, кажется, делает правильные вещи, полностью прозрачные элементы (с непрозрачностью: 0) все еще получают события мыши. Так, например, ссылки на элемент, который был увязан с переходом непрозрачности, по-прежнему реагируют на клики (хотя и не видимые), а ссылки за выцветшим элементом не работают (хотя они видны через выцветший элемент). См. http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html.

Это странное поведение можно избежать, просто используя оба перехода, переход на видимость и переход на непрозрачность. Таким образом, свойство видимости используется для отключения событий мыши для элемента, в то время как непрозрачность используется для визуального эффекта. Однако следует проявлять осторожность, чтобы не скрывать элемент во время воспроизведения визуального эффекта, который иначе не был бы видимым. Здесь удобна специальная семантика перехода видимости. При укрытии элемента элемент остается видимым при воспроизведении визуального эффекта и затем скрывается. С другой стороны, при обнаружении элемента переход видимости делает элемент видимым сразу, т. Е. Перед воспроизведением визуального эффекта.