Question

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

我有两个问题：

块未在一条线上对齐。（第一个街区较低）
当我点击打开中间区块时，它会从底部到顶部打开（我希望它从左向右）

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

Answer 1

我以一种我认为你打算这样做的方式优化了类和动画：
请随时问你是否理解某些东西，学习新东西总是好的;）

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

块未在一条线上对齐。（第一个区块较低）

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;

Answer 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;
}

从左到右打开div从0px

3 个答案: