I basically have a menu that slides onto the screen when you press a button. And on the menu I have a few buttons that currently don't do anything. What I want them to do is whenever a user clicks on a button I want the page to slide in from the bottom of the screen. I have tried to do this myself but for some reason it just closes the menu whenever I press one of the buttons.
当你按下按钮时，我基本上有一个菜单可以滑到屏幕上。在菜单上我有几个按钮，目前没有做任何事情。我希望他们做的是每当用户点击按钮时我希望页面从屏幕底部滑入。我自己尝试过这样做，但出于某种原因，只要按下其中一个按钮，它就会关闭菜单。
Here is what I have so far.
这是我到目前为止所拥有的。
//About Page Transition
function expand(){
$(this).toggleClass("on");
$(".aboutContent").toggleClass("active");
};
$("#about").on('click', expand);
//Projects Page Transition
function expand(){
$(this).toggleClass("on");
$(".aboutContent").toggleClass("active");
};
$("#projects").on('click', expand);
//Contact Page Transition
function expand(){
$(this).toggleClass("on");
$(".aboutContent").toggleClass("active");
};
$("#contact").on('click', expand);
//Menu Transition
function expand(){
$(this).toggleClass("on");
$(".menu").toggleClass("active");
};
$(".button").on('click', expand);body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
}
#aboutContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: blue;
z-index: 1000;
}
#projectsContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: black;
z-index: 1000;
}
#contactContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: white;
z-index: 1000;
}
.menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
background: rgba(60, 106, 152, 0.8);
width: 18%;
box-sizing: border-box;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
text-align:center;
box-shadow: 0 0 20px #000000;
}
.active {
transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-transition: 0.4s;
transition: 0.4s;
color: #e5e5e5;
}
h1 {
margin-top:60%;
font-size: 2.5em;
cursor: default;
}
ul {
padding:0;
list-style:none;
font-size:14px;
}
li {
padding:10px 10px;
}
a {
text-decoration:none;
padding:10px 15px;
color:#fff;
font-family:"Roboto";
font-size: 1.5em;
font-weight: 300;
}
a:hover {
text-decoration: line-through;
color: #d66863;
}
.content {
position:relative;
width:300px;
}
.button {
width:20px;
height:40px;
margin:24% 36%;
padding: 14px;
cursor:pointer;
}
.line {
width: 40px;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.line.first {
transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
.line.second {
transform: translateX(-10px) translateY(19px) rotate(0deg);
}
.button.on .line.top {
transform: translateX(-10px) translateY(20px) rotate(45deg);
}
.button.on .line.bottom {
transform: translateX(-10px) translateY(17px)rotate(-45deg);
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play|Raleway" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div class="menu">
<h1>Title</h1>
<ul>
<div id="home"><li><a href="#home"><i class="fa fa-home"></i> home</a></li></div>
<div id="about"><li><a href="#about"><i class="fa fa-user"></i> about</a></li></div>
<div id="projects"><li><a href="#projects"><i class="fa fa-code"></i> projects</a></li></div>
<div id="contact"><li><a href="#contact"><i class="fa fa-paper-plane"></i> contact</a></li></div>
</ul>
</div>
<div class="content">
<div class="button">
<div class="line first top"></div>
<div class="line second bottom"></div>
</div>
</div>
<div id="aboutContent">
</div>
<div id="projectsContent">
</div>
<div id="contactContent">
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/background.js"></script>
</body>
</html>2 个解决方案
#1
1
A very easy way to do this is with "animate.css".
一个非常简单的方法是使用“animate.css”。
All you do is dynamically apply the classes "animate slideInUp" (I think that's it anyway) to whatever element you want to slide in, and it just does.
你要做的就是动态地将“animate slideInUp”（我认为无论如何都是这样）的类应用到你想要插入的任何元素中，它就是这样做的。
You can do it with plain ol' JS, JQuery makes it braindead easy, bind it as a property in Angular/React (e.g. [ngClass]="theClasses"), however you want.
你可以使用普通的'JS，JQuery让它变得容易，将它绑定为Angular / React中的属性（例如[ngClass] =“theClasses”），但是你想要它。
In your case in fact, you wouldn't even have to dynamically do anything. Just hardcode the classes to the topmost div (or whatever) of the HTML page that loads in. Every time that page loads in, it'll slide up.
事实上，在你的情况下，你甚至不需要动态地做任何事情。只需将类硬编码到加载的HTML页面的最顶层div（或其他任何内容）。每次加载页面时，它都会向上滑动。
Check out animate.css, it's a great and powerful tool and delivers exactly what it says it does, "just add water animations". For basic DOM element animation I've never had to look anywhere else.
查看animate.css，它是一个功能强大的工具，可以提供它所说的功能，“只需添加水动画”。对于基本的DOM元素动画，我从来没有去过其他任何地方。
You can see it at work on my little personal website:
你可以在我的小个人网站上看到它：
http://www.tcoz.com
Every time you click a menu button, the page slides in.
每次单击菜单按钮时，页面都会滑入。
#2
0
make the width in .menu css 100%
使宽度在.menu css 100％
#1
1
A very easy way to do this is with "animate.css".
一个非常简单的方法是使用“animate.css”。
All you do is dynamically apply the classes "animate slideInUp" (I think that's it anyway) to whatever element you want to slide in, and it just does.
你要做的就是动态地将“animate slideInUp”（我认为无论如何都是这样）的类应用到你想要插入的任何元素中，它就是这样做的。
You can do it with plain ol' JS, JQuery makes it braindead easy, bind it as a property in Angular/React (e.g. [ngClass]="theClasses"), however you want.
你可以使用普通的'JS，JQuery让它变得容易，将它绑定为Angular / React中的属性（例如[ngClass] =“theClasses”），但是你想要它。
In your case in fact, you wouldn't even have to dynamically do anything. Just hardcode the classes to the topmost div (or whatever) of the HTML page that loads in. Every time that page loads in, it'll slide up.
事实上，在你的情况下，你甚至不需要动态地做任何事情。只需将类硬编码到加载的HTML页面的最顶层div（或其他任何内容）。每次加载页面时，它都会向上滑动。
Check out animate.css, it's a great and powerful tool and delivers exactly what it says it does, "just add water animations". For basic DOM element animation I've never had to look anywhere else.
查看animate.css，它是一个功能强大的工具，可以提供它所说的功能，“只需添加水动画”。对于基本的DOM元素动画，我从来没有去过其他任何地方。
You can see it at work on my little personal website:
你可以在我的小个人网站上看到它：
http://www.tcoz.com
Every time you click a menu button, the page slides in.
每次单击菜单按钮时，页面都会滑入。
#2
0
make the width in .menu css 100%
使宽度在.menu css 100％