我正在使用一个触发4-5个动画按钮的按钮。它在Chrome中运行良好但在FireFox中没有运行
我在当前项目中使用全屏背景视频，使用此按钮，但在firefox中，当我检查元素时，它显示在那里，但浏览器根本没有显示元素。
灵感来自 - http://codepen.io/phenax/'use strict';
(function (document, win) {
var animation_time = 600;
var btn_move_limit = 30;
var item_showing = false;
var className = {
show_items: 'menu--list__show',
revolve: 'menu--list__revolve',
button_cross: 'bar__crossy'
};
var $el = {
toggle_btn: document.querySelector('.js-menu--toggle'),
menu_items: document.querySelector('.js-menu--list'),
items: document.querySelectorAll('.js-item')
};
var constrain = function constrain(val, lim) {
return val > lim ? lim : val < -lim ? -lim : val;
};
var setButtonPosition = function setButtonPosition(left, top) {
$el.toggle_btn.style.left = constrain(left, btn_move_limit) + 'px';
$el.toggle_btn.style.top = constrain(top, btn_move_limit) + 'px';
};
var showAllItems = function showAllItems() {
var item_menu = $el.menu_items.classList;
item_menu.add(className.show_items);
setTimeout(function () {
item_menu.add(className.revolve);
$el.toggle_btn.classList.add(className.button_cross);
item_showing = true;
}, animation_time);
};
var hideAllItems = function hideAllItems() {
var item_menu = $el.menu_items.classList;
item_menu.remove(className.revolve);
$el.toggle_btn.classList.remove(className.button_cross);
setTimeout(function () {
item_menu.remove(className.show_items);
item_showing = false;
setButtonPosition(0, 0);
}, animation_time);
};
var findPosRelative = function findPosRelative(e) {
e = e.pageX ? {
pageX: e.pageX,
pageY: e.pageY
} : e.touches[0];
var offset = {
x: win.innerWidth / 2,
y: win.innerHeight / 2
};
e.pageX = e.pageX - offset.x;
e.pageY = e.pageY - offset.y;
return e;
};
var menuBtnClickHandler = function menuBtnClickHandler() {
if (item_showing)
hideAllItems();
else
showAllItems();
};
var itemClick = function itemClick(e) {
var item_id = e.target.dataset.id;
console.log('Item ID: ' + item_id);
hideAllItems();
};
var mouseMoveMent = function mouseMoveMent(e) {
var left, top;
if (item_showing) {
e = findPosRelative(e);
left = 140 * e.pageX / win.innerWidth;
top = 140 * e.pageY / win.innerHeight;
} else {
left = 0;
top = 0;
}
setButtonPosition(left, top);
};
document.addEventListener('DOMContentLoaded', function () {
$el.toggle_btn.addEventListener('click', menuBtnClickHandler);
for (var i = 0; i < $el.items.length; i++) {
if (window.CP.shouldStopExecution(1)) {
break;
}
$el.items[i].addEventListener('click', itemClick);
}
window.CP.exitedLoop(1);
win.addEventListener('mousemove', mouseMoveMent);
win.addEventListener('touchmove', mouseMoveMent);
});
}(document, window));
.menu--toggle {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
transform: translateX(-50%);
border: none;
outline: none;
cursor: pointer;
left: 0;
top: 0;
color: #222;
z-index: 1;
background-image: url("../images/logo/logo.jpg");
background-position: center;
background-size: cover;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
}
.menu {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: -80px;
filter: url("#svgFilter"); }
.menu .item {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
transform: translateX(-50%);
border: none;
outline: none;
cursor: pointer;
left: 0;
top: 0;
background-color: #FFEB3B;
color: #222; }
.menu .item {
transition: all 0.6s ease-in-out; }
.menu--toggle {
transition: all .2s linear; }
.menu--toggle .bar {
width: 20px;
height: 2px;
background-color: #222;
margin: 5px auto;
transition: all 0.6s ease-in-out; }
.menu--toggle.bar__crossy .bar:nth-child(2) {
opacity: 0; }
.menu--toggle.bar__crossy .bar:nth-child(1) {
transform: translateY(7px) rotate(45deg); }
.menu--toggle.bar__crossy .bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg); }
.menu--list ul {
list-style-type: none;
padding: 0;
margin: 0; }
.menu--list li {
position: absolute;
width: 60px;
height: 80px;
transition: all 0.6s ease-in-out;
transform-origin: 0% 50%; }
.menu--list__show .item {
margin-left: 60px; }
.menu--list__revolve li:nth-child(1) {
transform: rotate(90deg); }
.menu--list__revolve li:nth-child(1) .item {
transform: rotate(270deg); }
.menu--list__revolve li:nth-child(2) {
transform: rotate(180deg); }
.menu--list__revolve li:nth-child(2) .item {
transform: rotate(180deg); }
.menu--list__revolve li:nth-child(3) {
transform: rotate(270deg); }
.menu--list__revolve li:nth-child(3) .item {
transform: rotate(90deg); }
.menu--list__revolve li:nth-child(4) {
transform: rotate(360deg); }
.menu--list__revolve li:nth-child(4) .item {
transform: rotate(0deg); }
<div class="menu">
<nav class="menu--list js-menu--list">
<ul>
<li><button type="button" onClick="window.open('https://www.facebook.com/themadhousecafe', '_blank')" class="fa fa-facebook item js-item" data-id="1"></button></li>
<li><button type="button" onClick="window.open('http://blog.nomadbaker.com/', '_blank')" class="fa item js-item" data-id="2">Blog</button></li>
<li><button type="button" onClick="window.open('#', '_blank')" class="item js-item" data-id="3">Menu</button></li>
<li><button type="button" onClick="window.open('#', '_blank')" class="fa fa-phone item js-item" data-id="4"></button></li>
</ul>
</nav>
<button type="button" class='logo_button menu--toggle js-menu--toggle'>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</button>
</div>