孩子显示变化时的过渡

Question

我尝试使用过渡，但这不起作用。

#editar\_form\_btn 的 宽度 发生变化，因为我隐藏了小的孩子（按钮）并显示了大的 child(input[password])，
我想在 #editar\_form\_btn 的宽度增加时添加一个不错的缓慢过渡。

我是否正确使用了过渡？

片段：

(
  function ($) {

    $('#editar_btn').click(function(event) {
      $('#editar').hide();
      $('#form').show();
    });
  }
)(jQuery);

#input_senha {
  width: 180px;
  box-sizing: border-box;
  padding: 4px 40px 4px 15px;
  color: #555;
}

#input_submit {
  border: none;
  width: 40px;
  position: absolute;
  right: 0;
  top: 0;
}

#input_submit,
#input_senha,
#editar_btn {
  height: 34px;
  border: none;
  background-color: rgba(0,0,0,0);
}

#input_senha:focus {
  border-color: #3e3e82;
  box-shadow: inset 0 0 2px 0 rgba(62,62,130,.75), 0 0 12px 1px rgba(62,62,130,.75);
}

#input_submit:focus,
#input_senha:focus {
  outline: 0;
}

#editar_form_btn {
  border: 1px solid #7b7bc5;
  border-radius: 4px;
  transition: width .3s linear;
}

#form {
  position: relative;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="margin-top: 20px; width:300px; height:100px; border: solid 1px #7b7bc5; border-radius: 4px; padding: 5px">
  <div class="pull-right">
    <div id="editar_form_btn">
      <div id="editar">
        <button type="button" class="btn btn-default" id="editar_btn">
                Editar
                <i class="fa fa-lock" aria-hidden="true"></i>
              </button>
      </div>
      <div id="form" style="display: none">
        <form action="{{ route('post.edit', $post->id) }}" method="POST">
          <input type="password" name="senha" id="input_senha" value="1234512345123451234512345" required="required" title="Senha utilizada no cadastro.">
          <button type="submit" id="input_submit"><i class="fa fa-key" aria-hidden="true"></i></button>
        </form>
      </div>
    </div>
  </div>
</div>
</div>
</div>

来源：http://codepen.io/p1p0c0/pen/pbEgRw

#editar_form_btn {
  border: 1px solid #7b7bc5;
  border-radius: 4px;
  transition: width .3s linear;
}

Answer 1

为 jQuery 的显示/隐藏函数添加计时值。

$('#editar_btn').click(function(event) {
    $('#editar').hide(600);
    $('#form').show(600);
});

以毫秒为单位。

这是我在您的代码笔中添加的唯一内容...而且很好。