我正在尝试使用 css3 翻译向左或向右滑动菜单和容器。但是，单击切换时，菜单范围似乎滑动得非常快，而容器似乎缓慢地向左滑动。我是否正确编写了 css 样式？
CSS
.animate-left,.animate-left-container {
transition: all .6s ease-out 0.2s;
}
.animate-left-container {
-webkit-transform: translateX(0px);
}
.animate-right,.animate-right-container {
transition: all .6s ease-in 0.2s;
}
.animate-right-container {
-webkit-transform: translateX(0px);
}
.animate-left {
-webkit-transform: translateX(-45px);
margin-left: -45px;
}
.animate-right{
-webkit-transform: translateX(0);
margin-left: 0px;
}
JS
var container = $(".app-data-container").children();
$('.nav-toggle-button-container').on('click',function(e){
var x = $(container[0]), y= $(container[1]);
if(x.hasClass('animate-left') && y.hasClass('animate-left-container')) {
x.removeClass('animate-left').addClass('animate-right');
y.removeClass('animate-left-container').addClass('animate-right-container');
}else if(x.hasClass('animate-right')){
x.removeClass('animate-right').addClass('animate-left');
y.removeClass('animate-right-container').addClass('animate-left-container');
}else{
x.addClass('animate-left');
y.addClass('animate-left-container');
}
});
最佳答案
这花了一点时间，但我创建了一个示例，希望对您有所帮助，并且也许可以整体简化您的代码。
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="UTF-8">
<style type="text/css">
.rate-100pxs, .rate-200pxs {
-webkit-transition: all 1s ease 0;
-moz-transition: all 1s ease 0;
-o-transition: all 1s ease 0;
transition: all 1s ease 0;
}
#cell-1, #cell-2 {
display:inline-block;
position:relative;
width:200px;
}
h1 {
white-space:pre;
font-size:20px;
}
.animation-box {
position:relative;
background:#eee;
}
.animation-box .rate-200pxs {
left:200px;
}
.animation-box:hover .rate-200pxs {
left:0px;
}
.animation-box .rate-100pxs {
left:200px;
}
.animation-box:hover .rate-100pxs {
left:100px;
}
</style>
</head>
<body>
<h1>Distance: 200px Duration: 1s Rate:200 px/s</h1>
<div class="animation-box">
<div id="cell-1" class="rate-200pxs">Cell 1</div><div id="cell-2" class="rate-200pxs">Cell 2</div>
</div>
<h1>Distance: 100px/200px Duration: 1s Rate:100 px/s & 200 px/s</h1>
<div class="animation-box">
<div id="cell-1" class="rate-100pxs">Cell 1</div><div id="cell-2" class="rate-200pxs">Cell 2</div>
</div>
</body>
</html>关于javascript - 使用css3翻译滑动div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26435697/