如何解决边界半径在CSS转换期间不起作用
试图使菜单背景变圆。但是边界半径在关闭时不起作用
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。