javascript - 白色圆圈显示搜索工具栏

Question

我正在尝试使用 CSS 和 JavaScript 添加圆形显示动画以在我的网络应用程序中显示搜索工具栏。我正在尝试在 Android 上实现与 Whatsapp 相同的动画。

我设法制作了一个圆圈成长动画。如果您检查 demo ，您会注意到我指定了圆的最终宽度和高度，并进行了 transform: scale(0.0033) to scale(1) 以使圆不模糊。 不幸的是，我遇到了一些问题:

1. 不能使圆圈从搜索图标变大。
2. 当圆圈扩大时，后退图标和搜索输入不显示。我试图通过让一个 div 覆盖内容并在显示内容的圆圈同时向左移动来做到这一点。
3. 在移动设备上，搜索量的增长点与在 PC 上的增长点不同。
4. 圆圈没有覆盖整个工具栏。

我试了很多方法，在网上找遍了，都没有成功。我认为在这里，专业的开发人员和编码人员一定会找到更好的解决方案来解决我的问题。这是

DEMO

供您查看的网站。

Answer 1

模拟 whats app 搜索并不难。

看看这个:

https://jsfiddle.net/pablodarde/9ndp7z3L/

可以使用更多的代码来获得更好的结果。

HTML

<div class="navbar">
  <div class="container">
    <h1>Whats App</h1>
    <button id='search'>
      <i class="fa fa-search" aria-hidden="true"></i>
    </button>
    <div class="input-mask">
      <input type="text" placeholder="Search">
    </div>
  </div>
</div>

CSS

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}
.navbar {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  background: #009688;
  overflow: hidden;
}

.container {
  position: relative;
  width: 100%;
  height: 0;
}

h1 {
  position: absolute;
  width: 300px;
  height: 60px;
  margin: 0;
  top: 15px;
  left: 15px;
  font: normal 24px Arial, Verdana;
  color: #fff;
}

button {
  position: absolute;
  top: 10px;
  right: 15px;
  border: 0;
  background: 0;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  outline: 0;
}

.input-mask {
  position: absolute;
  top: 30px;
  right: -30px;
  display: flex;
  align-items: center;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  transition: all ease .6s;
}

input {
  position: absolute;
  right: 0;
  height: 60px;
  border: 0;
  font-size: 20px;
  padding: 0 0 0 10px;
  box-sizing: border-box;
}

JavaScript

    const search = document.querySelector('#search');
const input = document.querySelector('.container input');
const inputMask = document.querySelector('.input-mask');

const screenW = document.documentElement.clientWidth;

input.style.width = screenW +'px';

search.addEventListener('click', (e) => {
    inputMask.setAttribute('style', 'width: '+ Number(screenW+30) +'px; height: '+ screenW +'px; top: -'+ screenW/2 +'px; padding-top: 30px; right: -3px;');
  input.focus();
});

input.addEventListener('blur', (e) => {
  inputMask.setAttribute('style', 'width: 0; height: 0; top: 30px;');
  input.value = '';
});