问题描述
var menuButton = document.querySelector('.btn-menu');
menuButton.addEventListener('click',function(e){
e.preventDefault();
document.body.classList.toggle('menu-open');
});
.btn-menu{
width: 30px;
height: 30px;
border: 2px solid red;
position: relative;
z-index: 5;
float: right;
}
.menu-bg {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 40;
pointer-events: none;
z-index: 1;
}
.menu-bg:before {
content: '';
height: 1px;
width: 1px;
background: #000;
position: fixed;
right: 30px;
top: 30px;
transition: all ease .8s;
border-radius: 50%;
transform: scale(1);
overflow:hidden;
}
.menu-open .menu-bg:before {
transform: scale(500);
}
<div class="btn-menu"><a href=""><span>Menu</span></a></div>
<div class="menu-bg"></div>
JSfiddle-https://jsfiddle.net/afelixj/ew7b065h/
解决方法
这是浏览器错误。有时它可以正常工作,然后,如果您更改窗口宽度,它将开始变得混乱(我看到有时会打开菜单的问题)。
在固定元素上使用转换存在一个已知问题:link您应尽量避免这种情况。
在您的情况下,受制于变换,您只需更改宽度,高度和位置即可使其按需工作。
例如:
var menuButton = document.querySelector('.btn-menu');
menuButton.addEventListener('click',function(e){
e.preventDefault();
document.body.classList.toggle('menu-open');
});
.btn-menu{
width: 30px;
height: 30px;
border: 2px solid red;
position: relative;
z-index: 5;
float: right;
}
.menu-bg {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 40;
pointer-events: none;
z-index: 1;
}
.menu-bg:before {
content: '';
height: 1px;
width: 1px;
background: #000;
position: fixed;
right: 30px;
top: 30px;
transition: all ease .3s;
transform: scale(1);
border-radius: 50%;
}
.menu-open .menu-bg:before {
transition: all ease .6s;
height: 400px;
width: 400px;
right: -90px;
top: -90px;
border-radius: 50%;
}
<div class="btn-menu"><a href=""><span></span></a></div>
<div class="menu-bg"></div>
,
1px
,因为宽度/高度不是一个好主意,我会做不同的事情,并从scale(0)
开始:
var menuButton = document.querySelector('.btn-menu');
menuButton.addEventListener('click',function(e) {
e.preventDefault();
document.body.classList.toggle('menu-open');
});
.btn-menu {
width: 30px;
height: 30px;
border: 2px solid red;
position: relative;
z-index: 5;
float: right;
}
.menu-bg {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 40;
pointer-events: none;
z-index: 1;
}
.menu-bg:before {
content: '';
height: 100px;
width: 100px;
background: #000;
position: fixed;
right: -20px;
top: -20px;
transition: all ease .8s;
border-radius: 50%;
transform: scale(0);
overflow: hidden;
}
.menu-open .menu-bg:before {
transform: scale(5);
}
<div class="btn-menu"><a href=""><span>Menu</span></a></div>
<div class="menu-bg"></div>