Example of input with focus breaking slide down animation of form

Question

I have a form that is hidden below a text message. When the user toggles an action the text message slides up, and the height of the container is increased to reveal the form.

$(function() {
  $('button').click(function() {
    $('.animate-height').toggleClass('open');
    if ($('input[type="checkbox"]').is(":checked")) {
      $('input[type="text"]').last().focus();
    }
  });
});

button {
  margin-bottom: 1rem;
}

form input {
  display: block;
}

.animate-height {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 1rem;
  transition: height 500ms ease-in-out;
}

.animate-height.open {
  height: 4.5rem;
}

.animate-height.open .animate-margin {
  margin-top: -1rem;
}

.animate-margin {
  margin-top: 0;
  transition: margin-top 500ms ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle</button>
<label>
Set Focus
<input type="checkbox" name="setFocus">
</label>

<div class="animate-height">
  <div class="animate-margin">
    WILL SLIDE UP
  </div>
  <div class="animate-form">
    <form>
      <input name="test" type="text">
      <input name="test" type="text">
      <input name="test" type="text">
    </form>
  </div>
</div>

Problem

The animations of the form sliding down should be identical when "Set Focus" is checked or not checked, but the above example shows that the animation is correct only when "Set Focus" is not checked.

I do not understand why they are different, and how can I change the CSS so that the form animates consistently with or without focus.

Answer 1

在焦点上时，通过滚动即可看到该元素。这样一来，您可以在使用.scrollTop(0)切换课程之前，强制返回顶部。

$(function() {
  $('button').click(function() {
    if ($('input[type="checkbox"]').is(":checked")) {
      $('input[type="text"]').last().focus();
    }
    $('.animate-height').scrollTop(0).toggleClass('open');
  });
});

button {
  margin-bottom: 1rem;
}

form input {
  display: block;
}

.animate-height {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 1rem;
  transition: height 500ms ease-in-out;
}

.animate-height.open {
  height: 4.5rem;
}

.animate-height.open .animate-margin {
  margin-top: -1rem;
}

.animate-margin {
  margin-top: 0;
  transition: margin-top 500ms ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle</button>
<label>
Set Focus
<input type="checkbox" name="setFocus">
</label>

<div class="animate-height">
  <div class="animate-margin">
    WILL SLIDE UP
  </div>
  <div class="animate-form">
    <form>
      <input name="test" type="text">
      <input name="test" type="text">
      <input name="test" type="text">
    </form>
  </div>
</div>

Answer 2

添加代码突出显示
$（'。animate-height'）。toggleClass（'open'）;

    $(function() {
  $('button').click(function() {
    $('.animate-height').toggleClass('open');
    $( "input:first-child" ).trigger( "focus" );
    if ($('input[type="checkbox"]').is(":checked")) {
      $('input[type="text"]').last().focus();
    }
  });
});

button {
  margin-bottom: 1rem;
}

form input {
  display: block;
}

.animate-height {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 1rem;
  transition: height 500ms ease-in-out;
}

.animate-height.open {
  height: 4.5rem;
}

.animate-height.open .animate-margin {
  margin-top: -1rem;
}

.animate-margin {
  margin-top: 0;
  transition: margin-top 500ms ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle</button>
<label>
Set Focus
<input type="checkbox" name="setFocus">
</label>

<div class="animate-height">
  <div class="animate-margin">
    WILL SLIDE UP
  </div>
  <div class="animate-form">
    <form>
      <input name="test" type="text">
      <input name="test" type="text">
      <input name="test" type="text">
    </form>
  </div>
</div>