가시성이 작동하지 않는 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>

가시성은 사양에 따라 애니메이션 가능한 속성이지만 가시성 전환은 예상대로 점진적으로 작동하지 않습니다. 대신 가시성 지연으로 전환하여 요소를 숨 깁니다. 반면에 요소를 표시하는 것은 즉시 작동합니다. 이것은 사양에 정의 된대로입니다. (기본 타이밍 기능의 경우)에 되어 있고 브라우저에서 구현 된 것과 같습니다.

실제로 요소를 숨기는 다양한 시각 효과를 상상할 수 있기 때문에 이것은 또한 유용한 동작입니다. 요소 페이드 아웃은 불투명도를 사용하여 지정된 시각적 효과의 한 종류 일뿐입니다. 다른 시각 효과는 예를 들어 transform 속성을 사용하여 요소를 멀리 이동할 수 있습니다. http://taccgl.org/blog/css-transition-visibility.html

불투명 전환과 가시성 전환을 결합하는 것이 종종 유용합니다! 불투명도가 제대로 작동하는 것처럼 보이지만 완전히 투명한 요소 (불투명도 : 0 포함)는 여전히 마우스 이벤트를 수신합니다. 예를 들어 불투명 전환만으로 페이드 아웃 된 요소의 링크는 여전히 클릭에 응답하고 (표시되지는 않음) 페이드 된 요소 뒤의 링크는 작동하지 않습니다 (페이드 된 요소를 통해 표시됨). http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html 참조 .

이 이상한 동작은 전환, 가시성 전환 및 불투명 전환을 모두 사용하여 피할 수 있습니다. 따라서 가시성 속성은 요소에 대한 마우스 이벤트를 비활성화하는 데 사용되며 불투명도는 시각 효과에 사용됩니다. 그러나 시각적 효과가 재생되는 동안 요소를 숨기지 않도록주의해야합니다. 그렇지 않으면 보이지 않습니다. 여기서 가시성 전환의 특수한 의미가 편리해집니다. 요소를 숨길 때 요소는 시각 효과를 재생하는 동안 계속 표시되고 나중에 숨겨집니다. 반면에 요소를 표시 할 때 가시성 전환은 시각적 효과를 재생하기 전에 요소를 즉시 표시합니다.