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

Ответ 1

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

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

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

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

Список переходных (анимационных) свойств можно найти здесь

Ответ 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>

Ответ 3

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

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

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

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