我一直致力于为移动网站创建基本框架。我遇到了过渡问题。当点击菜单按钮时（网站的右上角），我有一个离屏幕div转换为在屏幕上。再次单击按钮时，它也会在屏幕外转换。只要不隐藏溢出，这样就可以正常工作。
我希望隐藏溢出，但只有在显示溢出时div才会转换。有什么想法可以解决这个问题吗？
var clicked = false;
function mobileNav() {
var doc = document.getElementsByClassName("innerMenu")[0];
if(clicked){
if(doc.classList.contains("transitionIn")) {
doc.classList.remove("transitionIn");
}
doc.classList.add("transitionOut");
}
else {
if(doc.classList.contains("transitionOut")) {
doc.classList.remove("transitionOut");
}
doc.classList.add("transitionIn");
}
clicked = !clicked;
} html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
text-decoration: none;
}
/* FOR TESTING AND VISIBILITY */
nav {
background-color: #cacdce;
}
a {
color: white;
}
a:hover {
color: black;
}
.logo {
background-color: white;
}
.jumbotron {
background-color: orange;
}
.content-one-left {
background-color: gray;
}
.content-one-right {
background-color: black;
}
.content-two-left {
background-color: blue;
}
.content-two-right {
background-color: gray;
}
footer {
background-color: #cacdce;
}
.fa.fa-bars {
color: white;
}
.fa.fa-bars:hover {
color: black;
}
/* MOBILE PAGE STYLING */
.wrapper {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
grid-template-rows: 1fr;
height: 85vh;
overflow: auto;
}
nav {
height: 15vh;
display: flex;
justify-content: space-between;
align-items: center;
}
.outerMenu {
position: absolute;
top: 0;
right: 0;
height: 15vh;
width: 30vw;
/* overflow: hidden; */
}
.icon {
margin-left: 12vw;
}
.fa.fa-bars {
margin-top: 4.5vh;
}
.innerMenu {
position: absolute;
top: 15vh;
right: -30vw;
height: 40vh;
width: 30vw;
display: flex;
flex-direction: column;
align-items: center;
font-size: 3vh;
background-color: #cacdce;
}
.innerMenu.transitionIn {
transition: 1s;
right: 0vw;
}
.innerMenu.transitionOut {
transition: 1s;
right: -30vw;
}
.innerMenu > a {
margin: 2.5vh 0;
}
.logo {
height: 14vh;
width: 16vw;
margin-left: 42vw;
}
.icon {
font-size: 6vh;
}
.jumbotron {
grid-column: col-start / span 12;
height: 65vh;
}
[class$="-left"] {
grid-column: col-start / span 12;
height: 50vh;
display: flex;
}
[class$="-right"] {
grid-column: col-start / span 12;
height: 50vh;
display: flex;
}
footer {
grid-column: col-start / span 12;
height: 15vh;
} <!DOCTYPE>
<html>
<head>
<title>testing</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="js/script.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="logo">
</div>
<div class="outerMenu">
<a href="#" class="icon" onclick="mobileNav()"><i class="fa fa-bars"></i></a>
<div class="innerMenu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Gallery</a>
<a href="#">Testimonials</a>
<a href="#">Contact</a>
</div>
</div>
</nav>
<main class="wrapper">
<header class="jumbotron">
</header>
<section class="content-one-left">
</section>
<section class="content-one-right">
</section>
<section class="content-two-left">
</section>
<section class="content-two-right">
</section>
<footer>
</footer>
</main>
</body>
</html>
答案 0 :(得分：0)
您可以隐藏身体x轴的滚动，然后使用javascript添加和隐藏外部菜单的滚动，将过渡css添加到内部菜单。
var clicked = false;
function mobileNav() {
var doc = document.getElementsByClassName("innerMenu")[0];
var outermenu = document.getElementsByClassName("outerMenu")[0];
if(clicked){
if(doc.classList.contains("transitionIn")) {
doc.classList.remove("transitionIn");
}
doc.classList.add("transitionOut");
setTimeout(function(){
outermenu.style.overflow = "hidden !important";
},1000);
}
else {
if(doc.classList.contains("transitionOut")) {
doc.classList.remove("transitionOut");
}
outermenu.style.overflow = "visible !important";
doc.classList.add("transitionIn");
}
clicked = !clicked;
} html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
text-decoration: none;
}
/* FOR TESTING AND VISIBILITY */
nav {
background-color: #cacdce;
}
a {
color: white;
}
a:hover {
color: black;
}
.logo {
background-color: white;
}
.jumbotron {
background-color: orange;
}
.content-one-left {
background-color: gray;
}
.content-one-right {
background-color: black;
}
.content-two-left {
background-color: blue;
}
.content-two-right {
background-color: gray;
}
footer {
background-color: #cacdce;
}
.fa.fa-bars {
color: white;
}
.fa.fa-bars:hover {
color: black;
}
/* MOBILE PAGE STYLING */
.wrapper {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
grid-template-rows: 1fr;
height: 85vh;
overflow: auto;
}
nav {
height: 15vh;
display: flex;
justify-content: space-between;
align-items: center;
}
.outerMenu {
position: absolute;
top: 0;
right: 0;
height: 15vh;
width: 30vw;
/* overflow: hidden; */
}
.icon {
margin-left: 12vw;
}
.fa.fa-bars {
margin-top: 4.5vh;
}
.innerMenu {
position: absolute;
top: 15vh;
right: -30vw;
height: 40vh;
width: 30vw;
display: flex;
flex-direction: column;
align-items: center;
font-size: 3vh;
background-color: #cacdce;
}
.innerMenu.transitionIn {
transition: 1s;
right: 0vw;
}
.innerMenu.transitionOut {
transition: 1s;
right: -30vw;
}
.innerMenu > a {
margin: 2.5vh 0;
}
.logo {
height: 14vh;
width: 16vw;
margin-left: 42vw;
}
.icon {
font-size: 6vh;
}
.jumbotron {
grid-column: col-start / span 12;
height: 65vh;
}
[class$="-left"] {
grid-column: col-start / span 12;
height: 50vh;
display: flex;
}
[class$="-right"] {
grid-column: col-start / span 12;
height: 50vh;
display: flex;
}
footer {
grid-column: col-start / span 12;
height: 15vh;
}
body{
overflow-x: hidden !important;
} <!DOCTYPE>
<html>
<head>
<title>testing</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="js/script.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="logo">
</div>
<div class="outerMenu">
<a href="#" class="icon" onclick="mobileNav()"><i class="fa fa-bars"></i></a>
<div class="innerMenu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Gallery</a>
<a href="#">Testimonials</a>
<a href="#">Contact</a>
</div>
</div>
</nav>
<main class="wrapper">
<header class="jumbotron">
</header>
<section class="content-one-left">
</section>
<section class="content-one-right">
</section>
<section class="content-two-left">
</section>
<section class="content-two-right">
</section>
<footer>
</footer>
</main>
</body>
</html>