Перехід 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;
}

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

Це відбувається тому, що переходи працюють за допомогою обчислення ключових кадрів між двома значеннями та створення анімації шляхом екстраполяції проміжних сум.

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>

Видимість - це анімаційна властивість відповідно до специфікації, але переходи щодо видимості не працюють поступово, як можна було очікувати. Натомість переходи затримки видимості приховують елемент. З іншого боку, зробити елемент видимим працює негайно. Це так, як це визначено специфікацією (у випадку функції за замовчуванням за замовчуванням) і як вона реалізована в браузерах.

Це також є корисною поведінкою, оскільки насправді можна уявити різні візуальні ефекти, щоб приховати елемент. Вицвітання елемента - це лише один вид візуального ефекту, який задається за допомогою непрозорості. Інші візуальні ефекти можуть перемістити елемент за допомогою, наприклад, властивості трансформації, також див. Http://taccgl.org/blog/css-transition-visibility.html

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

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