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

в скрипке ниже, у меня есть переход на видимость и непрозрачность отдельно. Последняя работает, но бывший не. Кроме того, в случае видимости, время перехода интерпретируется как задержка при наведении наружу. Происходит как в 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;
}
3 55
css css3 css-transitions

3 ответа:

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

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

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

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

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

79

видимость анимируются. Проверить это сообщение в блоге об этом: 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>
22

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

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

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

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

9