白色圆圈显示搜索工具栏

Question

我正在尝试添加循环显示动画，以便使用CSS和我的webapp显示搜索工具栏。 JavaScript的。我试图在Android上实现与Whatsapp相同的动画。

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

1. 无法通过搜索图标使圈子变长。
2. 圆圈展开时，不会显示后退图标和搜索输入。我试图通过让div覆盖内容并在显示内容的圆圈的同时向左移动来做到这一点。
3. 在移动设备上，搜索不会像在PC上那样发展。
4. 圆圈未覆盖整个工具栏。

我尝试了很多方法并在互联网上搜索没有运气。我认为，在这里，专业的开发人员和编码人员肯定会找到解决我问题的更好方法。这是

DEMO

网站供您查看。

Answer 1

模拟最新的应用搜索并不是那么困难。

看看这个：

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 = '';
});

Answer 2

找到解决方案。在https://mdcwp.ml使用它。我刚刚使用了clip-path。