transition 크로스브라우징 문제 도와주세요. 채택완료
html
</p>
<p><td class="td_new onoff_btn"></p>
<p><input type="checkbox" name="it_use[<?php echo $i; ?>]" value="1" id="use_<?php echo $i; ?>" <?php echo ($row['it_use'] ? "checked" : ""); ?>></p>
<p><label for="use_<?php echo $i; ?>"></label></p>
<p></td></p>
<p>
css
</p>
<p>.onoff_btn input[type="checkbox"]{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.onoff_btn input[type="checkbox"] + label{display:inline-block; width:60px; height:30px; background:#e2e2e2; border-radius:15px; position:relative; vertical-align:middle; font-size:9px; padding:3px 1px; cursor:pointer; text-align:left;}
.onoff_btn input[type="checkbox"] + label::after {content:'off'; display:inline-block; width:24px; height:24px; background:#fff; border-radius:50%; text-align:center; line-height:25px; position:relative; left:3px; -webkit-transition:all .5s; -moz-transition: transition:all .5s;}
.onoff_btn input[type="checkbox"]:checked + label{background:#d00829;}
.onoff_btn input[type="checkbox"]:checked + label::after{transform:translate(29px); content:'on';}</p>
<p>
크롬에서는 부드럽게 움직이는데 IE 랑 EDGE 에서는 transition 효과 없이 움직이기만 합니다.
어떤 문제일까요...? 도움부탁드립니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
코딩하는기계6년 전
IE 10 버전 미만은 Transition 을 지원하지 않는다고 합니다.
JQuery를 이용해서 IE9 이하 버전에서도 작동하게끔 하는 방법이 있다고 합니다.
http://louisremi.github.io/jquery.transition.js/test/index.html">http://louisremi.github.io/jquery.transition.js/test/index.html
위 주소대로...
해결방법은 직접 만드시거나, 그냥 크로스 브라우징 지원해주는 라이브러리 가져다가 쓰셔야할 것 같습니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택