如何使用css display：none切换动画
[英]How to toggle animate with css display:none
问题描述
Hopefully this ties together posts where gaps are missing, as I am having a ton of trouble with this. 
希望这可以将缺少缺口的帖子联系在一起，因为我遇到了很多麻烦。
Trying to toggle the div so it slides out of view and back into view each time a button is pushed. 尝试切换div，使其在每次按下按钮时滑出视图并返回视图。 Ultimately will be two or more dividers sliding out at the same time. 最终将同时滑出两个或更多分隔线。 I'm using: 我正在使用：
//css
display {visibility:hidden}
Then checking in the code for: 然后检查代码：
//js$
("#initiate").click( function(event) {
$("#initiate").click( function(event) {
if ($("#nav").is(":hidden")) {
$("#nav").stop().animate({
right: '520px'
}, 1300);
}
else {
$("#nav").stop().animate({
right: '320px'
}, 1300);
}
});
Multiples problems: 1. Slide only works if the visibility is set to something other than "none." 倍数问题：1。仅当可见性设置为“无”以外的其他内容时，幻灯片才有效。 2. Only slides out, not back in. 2.只滑出，而不是退回。
How can I make this work guys? 我怎么能让这个人工作呢？
http://jsfiddle.net/c48vdqf6/2/ http://jsfiddle.net/c48vdqf6/2/
5 个解决方案
解决方案1
2 2016-01-12 18:12:51
The display property cannot be animated, this is something that is often a point on which developers get stuck, but CSS just doesn't allow it. display属性不能动画，这通常是开发人员陷入困境的一点，但CSS只是不允许它。
You'll have to set the right property so that it is off the screen and is animated to slide into the screen when needed as you are doing in your Fiddle. 您必须设置right属性，使其不在屏幕上，并在需要时动画以滑入屏幕，就像您在小提琴中所做的那样。
EDIT 编辑
As for the 至于
Only slides out, not back in.
Just use a class to determine the position of the element 只需使用一个类来确定元素的位置
Like so: 像这样：
$("#initiate").click(function(event) {
if ($("#nav").hasClass("hidden")) {
$("#nav").stop().animate({
right: '-320px'
}, 1300);
} else {
$("#nav").stop().animate({
right: '520px'
}, 1300);
}
$("#nav").toggleClass("hidden")
});
Hope this helps! 希望这可以帮助！
解决方案2
1 已采纳 2016-01-12 18:29:07
Taking a slightly different approach, I would rather do the animation with css3 thanks to transition, and then toggle classes with javascript/jquery: 采用略有不同的方法，我宁愿用css3做动画，感谢转换，然后使用javascript / jquery切换类：
https://jsbin.com/yovaqo/edit?html,css,js,output https://jsbin.com/yovaqo/edit?html,css,js,output
<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
#display{
width:300px;
height:100vh;
position:fixed;
top:0;
right:0;
background-color:black;
transition:right 0.5s ease;
}
#display.hide{
right:-300px;
}
</style>
</head>
<body>
<p id="initiate">test</p>
<div id="display" class="hide"></div>
<script>
$("#initiate").on("click",function(){
$("#display").toggleClass("hide");
});
</script>
</body>
</html>
It introduce less complexity to the code and is easier to maintain in the long run (and with multiple sliding div etc etc). 它引入了较少的代码复杂性，并且从长远来看（以及使用多个滑动div等）更容易维护。
解决方案3
0 2016-01-12 18:14:44
Just use a class or a flag to determine the position of the element, instead of checking wether or not the element is visible 只需使用类或标志来确定元素的位置，而不是检查元素是否可见
$("#initiate").click(function(event) {
if ($("#nav").hasClass("hidden")) {
$("#nav").stop().animate({
right: '-320px'
}, 1300);
} else {
$("#nav").stop().animate({
right: '520px'
}, 1300);
}
$("#nav").toggleClass("hidden")
});
解决方案4
0 2016-01-12 18:17:35
So I'd do this with CSS rather than Javascript then use Javascript to add and remove a class of 'show' or something similar. 所以我用CSS而不是Javascript来做这个，然后使用Javascript添加和删除一类'show'或类似的东西。 I've just done something similar for an off-canvas menu. 我刚刚为画布菜单做了类似的事情。
I've posted an example here for you... 我在这里贴了一个例子......
https://jsfiddle.net/wyd1rxhg/ https://jsfiddle.net/wyd1rxhg/
.menu {
transition: left 0.5s ease;
position: absolute;
width: 400px;
left: -400px;
background-color: red;
}
.show {
left: 0;
}
As for it sliding back in, just remove the show class and off it'll go! 至于它重新滑入，只需删除show class并关闭它即可！
解决方案5
0 2016-01-12 18:24:34
I've changed the font color. 我改变了字体颜色。 Also, feel free to change the if statement to something more sophisticated. 此外，随意将if语句更改为更复杂的内容。 $("#initiate").click( function(event) { $（“＃initiate”）。click（function（event）{
http://jsfiddle.net/c48vdqf6/2/ http://jsfiddle.net/c48vdqf6/2/
if ($("#nav").css('right') == "320px") {
$("#nav").stop().animate({
right: '-320px'
}, 1300);
}
else {
$("#nav").stop().animate({
right: '320px'
}, 1300);
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.