使用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翻譯

回答

相關問題