使用CSS3滑动div翻译

我试图滑动菜单和容器左右使用CSS3翻译。但是在点击切换时，菜单跨度看起来很快地滑动，并且容器似乎缓慢地向左滑动。我是否正确编写了CSS样式？使用CSS3滑动div翻译

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; 
}

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'); 
} 
});

演示：http://jsfiddle.net/2b9e8bq9/

来源

2014-10-18 user1184100

我觉得你只是不占是要移动的距离。如果两种不同的东西在相同的时间内移动两个不同的距离，一个会移动得更快，另一个移动更慢。 – 2014-10-18 02:27:32

了解你的观点，但是有没有办法解决这个问题，或者这是css3动画的局限性 – user1184100 2014-10-18 02:31:12

调整每一个的持续时间以适应你希望他们走的方式，或者让他们走上相同的距离。你希望*率*是相同的，并通过距离/持续时间来计算。 – 2014-10-18 02:36:07

花了一点点，但我创造，我希望帮助，并可以，也许，简化代码的例子总体。

<!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>

来源

2014-10-18 03:03:28

使用CSS3滑动div翻译

回答

相关问题