儿童显示变化时的过渡

Question

我尝试使用转换，但这不起作用。

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>

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

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

/etc/profile

Answer 1

为jQuery的show / hide函数添加计时值。

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

以毫秒为单位。

这是我在你的codepen中唯一添加的...而且很好。