CSS / JS图标变形

Question

在web.whatsapp.com中，当您聚焦或模糊联系人搜索字段时，会发生一些酷的变形。html看起来像这样（我在那里不认识任何重要内容）：

<button class="icon icon-search-morph" data-reactid=".0.1:$main.2.2.0">
  <div class="icon icon-back-blue" data-reactid=".0.1:$main.2.2.0.0"></div>
  <div class="icon icon-search" data-reactid=".0.1:$main.2.2.0.1"></div>
</button>

通过尝试完成类似的工作，我遇到了这个很棒的库（这里的演示），但是我不知道whatsapp / facebook的人们是如何做到的，我想知道实现它的最佳方法。我也没有用到需要svgs（而不是webfonts）的svg-morpheus技术，但是也许这是唯一的选择？

（如果您不使用web.whatsapp，则基本上是从一个图标到另一个图标的动画过渡（变形）。在whatsapp应用中，它是后退箭头和放大镜之间的变形）

Answer 1

Whatsapp Web使用两个相互重叠的图标（其中一个具有opacity:0）

这是一个有关此的教程（我刚刚做了，因为它是一种有趣的技术）。

这是codepen。

本教程使用MaterializeCSS和Google图标字体。下面的示例是在没有这些示例的情况下实现的，仅作为快速演示。

但是我认为，您想要以Whatsapp Web（材料设计）的样式进行操作，因此MaterializeCSS和Google Icon字体是两个非常有用的资源。

.anim-container {
	height:4rem;
	width:4rem;
	transition:.3s;
	position:relative;
	cursor:pointer;
	}
	.anim-container .icons {
		transition:.3s;
		position:absolute;
		font-size:4em !important;
		height:1em;
		width:1em;
	}
	.anim-container .arr {
		transform:rotate(-135deg);
		opacity:0;
	}
	
.anim-container.morphed {
	transform:rotate(135deg);
	}
	.anim-container.morphed .arr {
		opacity:1;
	}
	.anim-container.morphed .search {
		opacity:0;
	}

.anim-container.small {
	height:2rem;
	width:2rem;
	font-size:.5rem;
}

<div class="anim-container small" onclick="this.classList.toggle('morphed')">
	<img src="https://maxcdn.icons8.com/windows10/PNG/32/Arrows/left_arrow-32.png" class="icons arr">
	<img src="https://maxcdn.icons8.com/Android_L/PNG/24/Very_Basic/search-24.png" class="icons search">
</div>
<div style="opacity:.7;">
	These two icons are from
	<a href="https://icons8.com" target="_blank">Icons8</a>
</div>