Question

为什么使用Translate（）移动元素优于Pos：abs Top / left Reference article Paul Irish

对于我的生活，我无法让这个css3翻译动画工作。所以我做了一个与行为相同的jquery交互。点击左上角的X .navi-toggle即可查看其效果。它相当生涩，我真的很好奇translate（）会有多好用。

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

我不知道翻译，但你可以使用保证金。

使用css3 translate而不是position：left

2 个答案: