使用CSS3轉換，而不是位置：左

Question

爲什麼移動元素對於翻譯（）比名次更好：ABS頂/左 Reference article 保羅愛爾蘭

對於我的生活，我不能讓這個CSS3轉換動畫工作。所以我做了一個與行爲相同的jquery交互。點擊左上角的X .navi-toggle即可看到它在運行。它非常生澀，我真的很好奇translate（）會有多好。

Codepen

HTML

<div id="page-container"> 
    <nav id="route-bar" > 
    </nav> 
    <div class="w-panel"> 
     <div class="navi-toggle">X</div> 
     <div class="panel"> 
    </div><!--end of w-panel--> 
</div><!--end of page container--> 

CSS

.open-panel 
    { 
     left:336px; 

    } 

CoffeeScript的

$(".navi-toggle").on 
    click: -> 
    $(".w-panel").toggleClass "open-panel" 

Answer 1

希望這會讓你更接近一點。根據你的CodePen例子，你真的只需要動畫width，這可以使用keyframes或可能的transition。

CSS

.open-panel { 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count:1; 
    -webkit-animation-name: slideOver; 
    -webkit-transform:translateX(90%); 
} 

@-webkit-keyframes slideOver { 
    from { 
     -webkit-transform:translateX(0%); 
    } 
    to { 
     -webkit-transform:translateX(90%); 
    } 
} 

這裏的full jsFiddle（上-webkit前綴道歉，希望這可以讓你開始）。

Answer 2

我不知道翻譯，但你可以使用保證金。