CSS 애니메이션 가시성 : 표시; Chrome 및 Safari에서 작동하지만 iOS에서는 작동하지 않습니다.

Question

Chrome (WinXP의 경우 19.0.1084.46m) 및 Safari (OS X 10.7.4의 경우 5.1.7)에서이 바이올렛 http://jsfiddle.net/Vkpwm/이 작동합니다. Google 이미지를 클릭하면 녹색 div가 표시되거나 숨겨 지지만 내 iPhone 및 xCode의 iPhone 시뮬레이터 (직접 페이지 http://jsfiddle.net/Vkpwm/show/을 사용하여)에로드하면 div가 다시 표시되지 않습니다.

"-webkit-transition : 0.5s;"줄을 제거하십시오. CSS에서 작동하지만 분명히 애니메이션이 깨집니다. "visibility : hidden;"줄을 제거합니다. 또한 작동하지만 div가 아직 있으며 이벤트가 실행됨을 의미합니다 (예 : div가 완전히 불투명하더라도 경고가 발생 함).

이것은 iOS 버그입니까? 아니면 데스크톱 브라우저에서 해결할 수없는 뭔가를하고 있습니까?

Answer 1

SO : iOS CSS opacity + visibility transition에서이 질문을 찾은 후 해결책을 찾았습니다.

가시성 : 표시를 설정 한 경우에만 불투명도로 전환을 적용해야했지만 숨김 상태가되기 전에 불투명도를 애니메이션으로 만들기 위해 visiblity : hidden에 그대로 두어야했습니다.

필자가 업데이트 한 저작물은 http://jsfiddle.net/Vkpwm/3/입니다.

Answer 2

전환시 불투명도가 유지됩니다. 활성 : 나는 불투명도 전환을 추가 한

.mydiv { 
     visibility:hidden; 
     opacity: 0; 
     transition: all 1s ease-out; 
     -webkit-transition: all 1s ease-out; 
     -moz-transition: all 1s ease-out; 
     -o-transition: all 1s ease-out; 
} 
.mydiv:hover { 
      visibility:visible; 
      opacity: 1; 
} 
.mydiv:active { 
      -webkit-transition: opacity 1s ease-out; 
} 

: 당신이 내 문제를 해결 한 방법 인 요소를 집중하기 위해 활용할 필요가 아이폰에 그 이후

.

이 방법은 Chrome, Firefox 및 iPhone (탭)에서 모든 전환 애니메이션 (높이 또는 다른 유형으로 애니메이션을 적용하려는 경우)과 함께 작동합니다.

불투명도 전환에 대해 알아보기 위해 Grezzo와 Michael Martin-Smucker에게 감사드립니다.