플라잉 액션 버튼 Javascript입니다.
첨부파일
본문
원 소스코드는
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
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/
크롬에서는 애니메이션에 문제가 되는것 같습니다. 애니메이션 종료확인이 확실한것이 시간을 기다려 보니, 키가 먹히네요..