从左到右打开 0px 的 div答案

【问题标题】：Open div from 0px left to right从左到右打开 0px 的 div
【发布时间】：2016-01-12 23:08:50
【问题描述】：

我正在尝试用动画打开一行块。目标是通过单击按钮从 2 个块变为 3 个块。我要添加的块必须在中间，并且必须从左到右淡入。

我有两个问题：

块未在 1 行上对齐。（第一块较低）
当我点击打开中间块时，它从下到上打开（我希望它从左到右）

这是我使用的其余代码，您可以在 JSFiddle 中看到
```
$('.openRed').on('click', function (e) {
$('.redHide').toggleClass('redShow').toggleClass('redHide');
```
谢谢，如果不清楚请告诉我！

【问题讨论】：

你可能想用 jQuery 的 .animate() 函数而不是 CSS 过渡来解决这个问题。
我确实尝试过。由于我在 jQuery 方面没有那么丰富的经验，所以我无法弄清楚这一点并且我被卡住了。所以如果你知道我很想知道这样我就可以学习了。
api.jqueryui.com/slide-effect
stackoverflow.com/questions/596608/…
@MarcosPérezGude - 太多了，我无法决定使用哪一个

标签： jquery html css animation

【解决方案1】：

我优化了类和动画，我认为您打算这样做：
如果您有不明白的地方，请随时询问，学习新事物总是好的;）

$('.openRed').on('click', function(e) {
  $('.red').toggleClass('show')
});

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: inline-block;
  vertical-align: top;
}
.red {
  display: inline-block;
  width: 0px;
  height: 100px;
  transition: 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.red.show {
  background-color: red;
  width: 100px;
  transition: 2s ease-in;
}
.yellow {
  width: 100px;
  height: 100px;
  background-color: yellow;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue">
  <button class="openRed">
    Open Red
  </button>
</div>
<div class="red"></div>
<div class="yellow"></div>

【讨论】：

最好是@JoshCrozier 的解决方案：stackoverflow.com/a/34746661/5035890
@MarcosPérezGude 什么？
浮动会对文档的流程造成伤害，在这种情况下浮动元素您将获得正常流程之外的元素。正如@JoshCrozier 所说，使用 inline-block 问题解决了，流程仍然完美。
@MarcosPérezGude 我更新了我的答案，你现在可以删除你的反对票 -.- 我也不认为 float:left 值得反对
您的新答案更好，但我认为在这种情况下，float:left 是 downvote 的优点，因为您修改了 OP 页面中的所有流程。当 OP 尝试将您的解决方案与 float 集成时，他可能会遇到比现在更多的问题。我删除了我的反对票，如果打扰到您，我们深表歉意。

【解决方案2】：

这些块未在 1 行上对齐。（第一块较低）

inline-block 元素的基线是其last line box in the normal flow 的基线。换句话说，元素是根据按钮元素中的文本对齐的。您可以将 vertical-align: top 添加到该元素以解决对齐问题：

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: inline-block;
  vertical-align: top;
}

当我点击打开中间块时，它从下到上打开（我希望它从左到右）

然后过渡宽度而不是高度。将初始高度设置为100px，然后指定过渡只应过渡元素的宽度：

Updated Example

transition: 2s width ease-in;

旁注：

您无需使用两次.toggleClass() 方法。只需指定两个类。

$('.openRed').on('click', function(e) {
  $('.redHide').toggleClass('redShow redHide');
});

但是，您实际上只需要切换 redShow 类：

$('.openRed').on('click', function(e) {
  $('.redHide').toggleClass('redShow');
});

您也可以使用transition 速记：

例如：

transition: 2s width ease-in;

【讨论】：

非常感谢您的解释。现在按钮没有切换。它只是打开而不是关闭是应该发生的事情吗？
@MarLen 我在回答中解决了这个问题，请随时提问
@MarLen 只需切换 redShow 类而不是两者：jsfiddle.net/bxg1jjuu
谢谢你，真的帮了我很多忙！

【解决方案3】：

这就是你所追求的：https://jsfiddle.net/h3dgfe2w/

body{
  display: inline-block;
}

.row{

}

.block {
  float:left;
  margin-left:5px;
}

.blue {
  width:100px;
  height: 100px;
  background-color: blue;
  display: inline-block;
}

.red {
    display: inline-block;
    overflow: hidden;
    height: 100px;
    width: 0px;
    background-color: red;
    visibility: hidden;
}
.yellow {
  width:100px;
  height: 100px;
  background-color: yellow;
  display: inline-block;
}


@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    width: 0px;
    visibility: visible;
  }

  to {
    width: 100px;
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  visibility: visible;
}


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

【讨论】：