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

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

---

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

This also is a useful behavior, since in fact one can imagine various visual effects to hide an element. Fading out an element is just one kind of visual effect that is specified using opacity. Other visual effects might move away the element using e.g. the transform property, also see http://taccgl.org/blog/css-transition-visibility.html

It is often useful to combine the opacity transition with a visibility transition! Although opacity appears to do the right thing, fully transparent elements (with opacity:0) still receive mouse events. So e.g. links on an element that was faded out with an opacity transition alone, still respond to clicks (although not visible) and links behind the faded element do not work (although being visible through the faded element). See http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html.

This strange behavior can be avoided by just using both transitions, the transition on visibility and the transition on opacity. Thereby the visibility property is used to disable mouse events for the element while opacity is used for the visual effect. However care must be taken not to hide the element while the visual effect is playing, which would otherwise not be visible. Here the special semantics of the visibility transition becomes handy. When hiding an element the element stays visible while playing the visual effect and is hidden afterwards. On the other hand when revealing an element, the visibility transition makes the element visible immediately, i.e. before playing the visual effect.

참고URL : https://stackoverflow.com/questions/27900053/css-transition-with-visibility-not-working