Использование css3 translate вместо position: left

Почему перемещение элементов с помощью Translate() лучше, чем Pos:abs Top/left Справочная статья Пол Айриш

На всю жизнь я не могу заставить эту анимацию перевода 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;

    }

кофескрипт

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

jquery css css-animations translate-animation
person Armeen Harwood    schedule 28.07.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Надеюсь, это немного приблизит вас. Основываясь на вашем примере 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%);
    }
}

Вот полный jsFiddle (извините за префикс -webkit, надеюсь, это поможет вам начать работу).

person Brett DeWoody    schedule 28.07.2013

arrow_upward
-2
arrow_downward

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

person Rahul Makhija    schedule 28.07.2013