http://jsfiddle.net/2nzp8835/1/과 같은 간단한 마크 업이 있습니다. expand
을 클릭하면 "full screened"가됩니다. 그런 다음 animate.css를 사용하여 애니메이션 페이드 인을 http://jsfiddle.net/ph1rvh6p/1/ 및 expand
과 같이 추가했습니다.
이유를 알 수 없습니다. 고정 위치 요소와 함께 animate.css를 둘 다 사용할 수 있습니까?Animate.css 및 고정 위치
1
A
답변
0
나는 그것을 고친다. 그러나 나는 아직도 그것을 이해할 수없는 몇 가지 이유가있다.
내 솔루션은 여기에 있습니다 : JSFiddle.는
key 속성은 CSS3 속성의 vw
및 vh
.fullscreen-mode{
height: 100vh;
left: -10px;
position: fixed;
top: -10px;
width: 100vw;
z-index: 99999;
}
입니다. IE8 ~ IE9를 고려하면 효과가 없을 수 있습니다. 하지만 Chrome과 FF에서는 잘 작동합니다. 세부 이유를 찾으려고합니다. 다음은 몇 가지 단서이다 :
animation.css에서 이러한 클래스 I 이들 중 일부를 제거
.fadeInRight {
animation-name: fadeInRight;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
을 사용했다. 그리고 효과가 돌아올 것입니다. 따라서 애니메이션은 페이지 흐름을 재정의하여 용도가 효과를 내지 못하게합니다. 라는 이름의 클래스가 애니메이션 및 방법 :
은 여기에 첨부 할 질문이다. fadeInRight animation.css의 효과 페이지 흐름? 누군가 도와 드릴 수 있기를 바랍니다.
Chrome 37에서 이것을 재현 할 수 있지만 브라우저 버그 인 IE11에서 제대로 작동하는 것 같습니다. – Azrael
나를 위해 그것은 FF와 크롬에서 작동하지 않습니다, IE10,11 좋다. – Kai