代码之家 › 专栏 › 技术社区 › Reactgular

窗体的焦点分解向下滑动动画输入示例

animation css html jquery javascript

Reactgular · 技术社区 · 7 年前

我有一个隐藏在短信下面的表单。当用户切换动作时,文本消息会向上滑动,容器的高度会增加以显示表单。

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

问题

选中或未选中“设置焦点”时,向下滑动表单的动画应该相同,但上面的示例显示动画是相同的对的仅当“设置焦点”为 未检查 .

我不明白为什么它们不同,我如何才能改变CSS,使窗体在有焦点或无焦点的情况下始终保持动画效果。

2 回复 | 直到 7 年前

Kaddath 7 年前

聚焦时,元素通过滚动进入视图。因此,在使用切换类之前,您可以强制回滚到顶部 .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>

Tushar Kumawat 7 年前

添加代码高亮显示
$('.animate height')。切换类('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>