【发布时间】：2017-02-10 04:30:35
【问题描述】：
所以我正在制作一个左侧菜单，当你单击它时它会滑入，它工作正常动画是正确的，当我尝试使用类 .bd 为 div 设置动画时（我使用它作为主体页面）它没有动画。它移动正确，但很突然，不知道为什么会这样，我包含了一个codepen，我还将包含一个代码 sn-p，它在它们中都给了我相同的结果。
$(document).ready(function(){
$('.opener').click(function(){
function name(){
if($('.bd').css('margin-left') == ($('body').width()*25)/100+'px'){
$('.bd').css({
'animation-name':'expandbody',
'anmation-duration':'2s',
'margin-left':'0',
'width':'100%'
});
$('.menu').css({
'animation-name':'closemenu',
'animation-duration':'1s',
'width':'0%',
'display':'none'
});
}else{
$('.bd').css({
'animation-name':'smallerbody',
'anmation-duration':'2s',
'margin-left':'25%',
'width':'75%'
});
$('.menu').css({
'animation-name':'expandmenu',
'animation-duration':'1s',
'width':'25%',
'display':'block'
});
}
}
name();
});
});html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
.menu{
width:25%;
height:100%;
position:fixed;
background-color:#0A0A0A;
display:none;
}
.menu ul{
padding:0;
margin:0;
}
.menu ul li{
margin:0;
padding:0;
width:100%;
border-bottom:1px solid #F0F0F0;
height:50px;
line-height:50px;
}
.menu ul li a{
display:block;
margin:0;
padding:0;
width:100%;
color:#F0F0F0;
text-decoration:none;
font-size:1.5em;
font-family:Arial;
font-weight:bold;
transition:all .5s;
}
.fa{
width:25px;
margin-left:10px;
margin-right:25px;
}
.caret{
float:right;
display:block;
width:0px;
height:0px;
border-top:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid #F0F0F0;
position:relative;
top:13px;
display:none;
}
.menu ul li:hover{
background-color:#1A1A1A;
}
.menu ul li:hover a>.caret{
display:block;
}
.bar{
position:fixed;
margin:0;
padding:0;
top:0;
width:100%;
height:50px;
background:#0A0A0A;
color:#A0A0A0;
}
.opener{
line-height:40px;
font-size:2em;
margin-left:25px;
padding-left:6px;
padding-right:6px;
margin-top:5px;
margin-bottom:5px;
max-width:30px;
cursor:pointer;
font-weight:bold;
transition:all .5s;
}
.opener:hover{
color:#F0F0F0;
}
.bd{
width:100%;
height:100%;
background-color:#F0F0F0;
}
/* Animations*/
@keyframes expandmenu{
from{
width:0%;
display:none;
}
to{
width:25%;
display:block;
}
}
@keyframes closemenu{
from{
width:25%;
display:block;
}
to{
width:0%;
display:none;
}
}
@keyframes expandbody{
from{
width:75%;
margin-left:25%;
}
to{
width:100%;
margin-left:0%;
}
}
@keyframes smallerbody{
from{
width:100%;
margin-left:0%;
}
to{
width:75%;
margin-left:25%;
}
}<head>
<title>Queltick | Admin Dashboard</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script
src="http://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
</head>
<body>
<div class="menu">
<ul>
<li><a class="menuitem" href="#"><span class="fa fa-home"></span>Home <span class="caret"></span></a></li>
<li><a class="menuitem" href="#"><span class="fa fa-user"></span>Users <span class="caret"></span></a></li>
<li><a class="menuitem" href="#"><span class="fa fa-book"></span>Posts <span class="caret"></span></a></li>
<li><a class="menuitem" href="#"><span class="fa fa-users"></span>Groups <span class="caret"></span></a></li>
</ul>
</div>
<div class="bd">
<div class="bar">
<div class="opener">
☰
</div>
<div class="logo"></div>
</div>
</div>
</body>编辑：
我将($(window).width()*25)/100+'px' 更改为($('body').width()*25)/100+'px' 以使其更具响应性
【问题讨论】：
-
它在我的兄弟身上运行良好。我在最后一个 div 之前添加了一些 h1 标签来填充你的 .bd 内容，它完全可以推送它们，这似乎是确切的问题。
-
身体被正确推到了，但由于某种原因，推没有动画
标签： javascript jquery html css