使用 css3 translate 而不是 position: left答案

【问题标题】：Using css3 translate instead of position: left使用 css3 translate 而不是 position: left
【发布时间】：2013-07-28 05:52:41
【问题描述】：

为什么使用 Translate() 移动元素优于 Pos:abs Top/left 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;

    }

咖啡脚本

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

【问题讨论】：

标签： jquery css css-animations translate-animation

【解决方案1】：

我不知道翻译，但你可以使用边距。

【讨论】：

【解决方案2】：

希望这能让你更接近一点。根据您的 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 前缀表示歉意，希望这能让您入门）。

【讨论】：