플라잉 액션 버튼 Javascript입니다. 채택완료
원 소스코드는
https://github.com/nobitagit/material-floating-button 입니다.
액션 버튼이 한개만 보이고 있다가 첫번째를 클릭 또는 마우스를 올리면 액션 버튼 3개가 나오는 형태입니다.
데모 http://nobitagit.github.io/material-floating-button/">http://nobitagit.github.io/material-floating-button/ (마우스만 올리면 됩니다.)
이것을 첫번째 버튼 부터 바로 액션으로 들어갈 수 있게 고치고 있습니다.
앱개발의 일환으로. (http://sir.co.kr/so_app)...">http://sir.co.kr/so_app )
그런데Firefox, Firefox dev, IE11 에서는 잘 동작합니다. 그런데 크롬에서만 화면의 아무 위치라도 클릭해야 동작을 합니다.
아래 수정된 코드 올려 봅니다.
실행 파일은 Demo/index.html이고
수정된 자바스크립트는 src/mfb.js 입니다.
답변 1개
css에 키프레임 애니메이션을 주석처리하고 테스트해보세요.
영 애매하네요.
</p><p>.mfb-component--br {</p><p>/*</p><p>animation: fromBottom 1.6s 1;</p><p>-webkit-animation: fromBottom 1.6s 1;</p><p>*/</p><p>} </p><p>
제가 보기엔 코드문제라기보다, 크롬 특유의 성향인듯한데요. 좀더 구글링해봐야겠네요.
이동하는 키프레임 애니메이션일 경우, 애니메이션 종료시 종료확인이 잘 안되는 경우가
있는 것 같습니다. 잘되다가 안되다가 하는 것 보니 캐시관련인것 같기도 하고
애니메이션 종료 캡쳐는 index.html 맨 아래 아래 코드를 줏어다 사용했습니다.
</p><p><script></p><p>var e = document.getElementById("menu");</p><p> </p><p>function whichTransitionEvent(){</p><p> var t;</p><p> var el = document.createElement('fakeelement');</p><p> var animations = {</p><p> "animation" : "animationend",</p><p> "OAnimation" : "oAnimationEnd",</p><p> "MozAnimation" : "animationend",</p><p> "WebkitAnimation": "webkitAnimationEnd"</p><p> }</p><p> </p><p> for (t in animations){</p><p> if (el.style[t] !== undefined){</p><p> return animations[t];</p><p> }</p><p> }</p><p>}</p><p> </p><p>/* Listen for a transition! */</p><p> </p><p>var transitionEvent = whichTransitionEvent();</p><p>transitionEvent && e.addEventListener(transitionEvent, function() {</p><p><span class="Apple-tab-span" style="font-size: 11pt; line-height: 1.5; white-space: pre;"> </span><span style="font-size: 11pt; line-height: 1.5;">console.log('Transition complete! This is the callback, no library needed!');</span></p><p>});</p><p></script> </p><p>
출처 : https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인