Open div from 0px left to right

Question

I'm trying to open a row of block with an animation. The goal is to go from 2 block to 3 blocks by clicking a button. The block that I want to add has to go in the middle and has to fade in from left to right.

I have two problems:

1. The blocks are not aligned on 1 single line. (The first block is lower)

2. When I click to open the middle block it opens from the bottom to the top (I want it to go from left to right)

   This is the code that I used the rest you can see in the JSFiddle

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

   Thank you, if it's not clear let me know!

Answer 1

I optimized the class and animation, in a way I think you intended to do it:
please feel free to ask if you don't understand something, it's always good to learn new things ;)

$('.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>

Answer 2

The blocks are not aligned on 1 single line. (The first block is lower)

The baseline of an inline-block element is the baseline of its last line box in the normal flow. In other words, the elements are being aligned based on the text in the button element. You could add vertical-align: top to that element in order to fix the alignment issues:

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

When I click to open the middle block it opens from the bottom to the top (I want it to go from left to right)

Then transition the width rather than the height. Set the initial height to 100px, and then specify that the transition should only transition the width of the element:

Updated Example

transition: 2s width ease-in;

Side note(s):

You don't need to use the .toggleClass() method twice. Just specify both classes.

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

However, you really only need to toggle the redShow class:

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

You can also use the transition shorthands:

For instance:

transition: 2s width ease-in;

Answer 3

is this what you seaking: 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;
}