Блог

В скрипте ниже у меня есть переход на видимость и непрозрачность отдельно. Последнее работает, а первое — нет. Более того, в случае видимости время перехода интерпретируется как задержка при наведении курсора мыши. Происходит как в 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;
}
  

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

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

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

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

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

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

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

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

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

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

Если вы хотите отложить видимость, то приведенный ниже фрагмент кода может быть решением.
Поскольку свойство ‘visibility’ включено / выключено, вы можете использовать transition-delay свойство для управления временем, когда объект должен быть видимым.

 div {
    width:100px;
    height:20px;
}
.menu {
    transition-delay: 0s;
    transition-duration: 0s;
    transition-property: opacity;
    background:#eee;
    width:100px;
    margin:0;
    height: 0px;
    opacity: 0;
    list-style:none;
    overflow: hidden;
}

div:hover > .menu {
    height: initial;
    transition-delay: 1s;
    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>