[css] 가시성이 작동하지 않는 CSS 전환

Program / 글쓴이

아래 바이올린에서 가시성과 불투명도를 개별적으로 전환했습니다. 후자는 작동하지만 전자는 작동하지 않습니다. 또한 가시성의 경우 전환 시간은 마우스 오버시 지연으로 해석됩니다. 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 참조 .

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

답변