Question

我正在尝试创建一个滑动搜索框。

按下按钮时，搜索框应从按钮上滑出。

我正在尝试使用translateX（100％）属性。

但是在基于WebKit的浏览器上，最初的translationX（100％）不起作用。

当我将translateX从100％切换到0时，它会以错误的方向滑动。 Firefox + Edge-一切正常。

仅Webkit问题。

我确定我错过了一些东西，或者这可能是一个众所周知的错误？

如何解决此问题？

谢谢！

Jsfiddle链接-https://jsfiddle.net/timonbandit/dm9u0w7t/44/

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<form action="/search" class="m-search-box__form">
<div class="m-search-box__input-wrp">
<input autofocus="autofocus" class="m-search-box__input" type="search">
</div>
<button class="m-search-box__submit" type="submit">I</button>
</form>

.m-search-box__form {
  float: right;
  display: flex;
  width: 35px;
  position: relative;
}

.m-search-box__input-wrp {
  position: absolute;
   top: 0;
   right: 35px;
   overflow: hidden;
}

.m-search-box__input {
  display: inline-block;
  height: 35px;
  transform: translateX(100%);
  transition: all 0.3s ease-in-out;  
}
.m-search-box__input.opened {
  transform: translateX(0)
}

.m-search-box__submit {
  width: 35px;
  height: 35px;
}

$(".m-search-box__submit").click(function(e){
    e.preventDefault();
  $(".m-search-box__submit").toggleClass("opened");
  $(".m-search-box__input").toggleClass("opened");

})

Answer 1

我找到了问题和解决方法。

<form action="/search" class="m-search-box__form">

<div class="m-search-box__input-wrp">

  <input class="m-search-box__input" type="search">

</div>

<button class="m-search-box__submit" type="submit">

  I

</button>

https://jsfiddle.net/timonbandit/dm9u0w7t/46/

并找到一个相关主题。

问题出在基于WebKit的浏览器中的自动对焦属性中。

如果元素包含自动对焦属性-WebKit仍将显示它：-）

因此解决方案是删除自动对焦属性或从该主题中获取答案-Why is transition started up with autofocus?

Webkit浏览器转换：翻译错误行为

1 个答案: