CSS3 전환을위한 JQuery 폴백

간단한 CSS3 전환 코드에 대한 JQuery/JS 폴백을 찾고 있습니다. 자바 스크립트가 정말 기본이므로 대체 코드를 찾고 쓰는 것이 쉽지 않습니다. 나는 이미 모더니저를 확인했지만, 많은 문서를 실제로 이해하지는 못했다.CSS3 전환을위한 JQuery 폴백

호버링 할 때 transform: rotate(20deg)을 사용하는 아이콘입니다 (IE에서 지원하는 것과 같은 문제는 아닙니다). 그러나 문제는 내가

.icon{ 
....other css code 
-webkit-transition: all 300ms linear; 
-moz-transition: all 300ms linear; 
-o-transition: all 300ms linear; 
-ms-transition: all 300ms linear; 
transition: all 300ms linear; 
}

JQuery와 대체이 거기에있다을 사용하고, 전환인가? 내가 fadeIn();에 대해 생각하고 있었지만 나는 이것이 어떻게 코드화 될지 전혀 모른다. 이 같은 뭔가

<script>$(icon).hover(function(){$(icon).fadeIn("slow");}); </script>

을? : 어떻게 내가 브라우저는 그것이 IE를 있다면 그들은 단지 JQuery와를 선택할 수 있도록 대체입니다 알려주나요?

출처

2013-03-28 fumpr

jquery animate 사용 –

CSS 전환 사용의 장점은 지원되지 않는 경우에도 변경 사항이 계속 발생하며 애니메이션이 적용되지 않는다는 점입니다. 나는 그걸 고수 할거야 .. – Bill

@BillyMathews 네, 참으로 IE에서 깜박입니다. 나쁘지는 않지만, 35 %의 사람들 (벨기에 출신)이 여전히 사용하고 있기 때문에 모두에게 같은 경험을주고 싶습니다. IE. – fumpr

Transit은 jQuery 애니메이션 호출을 CSS3 애니메이션으로 변환하고 지원되지 않는 브라우저의 경우 일반 js로 폴백합니다.

또는 $ .support를 확장하여 전환 like this을 확인하고 테스트가 실패 할 때 jQuery animate를 사용할 수 있습니다.

출처

2013-03-28 13:33:49

나는 네가 틀렸다고 생각해. "Transit은 단순히 애니메이션을 사용하지 않고 표준 CSS (불투명도, marginLeft 등)를 수행하면서 변형 (회전, 크기 조정 등)을 수행하지 않고 이전 브라우저를 저하시킵니다." 모든 폴백은 스스로 프로그래밍해야합니다. –

@ René "프레임 기반 애니메이션 폴백 전환이 지원되지 않는 클래식 애니메이션으로 전환하려면 수동으로 .transitition을 .animate로 다시 정의하십시오." –

당신은 이미 대답을 가지고 있다고 생각합니다. 당신이 생각하는 것처럼 복잡하지는 않습니다. 거기에는 두 가지 방법이 있습니다. 사용 가능한 기능과 그렇지 않은 방법을 지정하는 두 가지 방법이 있습니다. 첫 번째는 일련의 HTML 요소의 CSS 클래스 :

<html class="js no-flexbox canvas canvastext postmessage no-websqldatabase ... ">

가 그것 "노 인 flexbox"와 같은 "아니 -"preffix와 이름을 표시합니다 사용할 수없는 경우는, 이름이 나타납니다 사용할 수있는 경우, 두 번째 하나는 자바 스크립트를 통해이다 :

if(!Modernizr.csstransitions)

Modernizr에는 bool 사용 가능한지 여부를 알려주는 변수가 있으므로 애니메이션의 폴백을 설정하려면 Modernizr 클래스를 사용하여이 기능이있는 브라우저에 대해서만 애니메이션을 지정하는 것이 좋습니다.

.csstransitions #element{ 
-webkit-transition: ... ; 
-moz-transition: ... ; 
-o-transition: ... ; 
-ms-transition: ... ; 
transition: ... ; 
}

하고 다음 애니메이션 지정되지 않은 경우에는이 기능을 사용할 수있는 경우 모더 나이저 검사 한 변수와 자바 스크립트 파일을 작성

if(!Modernizr.csstransitions) 
    $("#element").hover(function(){ $(this).animate({ ... your animation ... }, 5000); });

이 당신에게 모더 나이저가 어떻게 작동하는지 아이디어를 줄 수있다 (나는 희망), 어쨌든 문제가있는 경우 이것을 확인하실 수 있습니다 blog post 오래 전에 만들었습니다. CSS3PIE와 같은 몇 가지 다른 것들 (이것은 스팸이 아니며 단지 도우려는 것입니다).

출처

2013-03-28 13:46:57 mechdeveloper

감사합니다! 이제 시도해 보겠습니다. – fumpr

전환을 감지하기 만하면 $ .support를 확장 할 수 있습니다. 이미 표시된 요소에 fadeIn이 어떤 영향을 주어야합니까? –

글쎄요, 저는 Modernizr이 어떻게 작동하는지 보여주고 싶었습니다. 애니메이션이 무엇인지 모르므로, 이미 표시되어있는 요소에 fadein이 어떤 효과를 가져야하는지 모르겠습니다. – mechdeveloper

답변

관련 문제