Использование CSS3 перевести вместо позиции: левый

Question

Почему Перемещение элементов с Перевести() лучше, чем Pos: ABS Верхний/левый Reference article Paul Irish

Для жизни меня, я не могу получить это 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

Я понятия не имею о переводе, но вместо этого вы можете использовать margin.