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