Question

我有一个标签列表，形成标签云。我将包含一个搜索选项，用于隐藏/删除与搜索不匹配的标记。如果我这样做，标签云将自动重新排列，但它将立即重新排列。我想要某种形式的动画。

我研究并发现属性position不可动画。我已经使用MutationObserver并且能够检测到DOM中的更改但仍不确定如何对回调函数执行操作。

＆＃13;

.tagcloud ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tagcloud ul li {
	position: relative;
	display: inline-block;
	margin: 0 .75em .5em 0;
	padding: 0;
}
.tagcloud ul li a {
	position: relative;
	display: inline-block;
	height: 28px;
	line-height: 28px;
	padding: 0 1em;
	background: #fff;
	border: 1px solid #aaa;
	border-radius: 3px;
	word-wrap: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	color: #333;
	font-size: 13px;
	text-decoration: none;
	-webkit-transition: .2s;
	transition: .2s;
}
.tagcloud ul li span {
	position: absolute;
	top: 0;
	right: -10px;
	z-index: 2;
	width: 28px;
	height: 28px;
	line-height: 28px;
	background-color: #3498db;
	border: 1px solid #3498db;
	border-radius: 100%;
	color: #fff;
	font-size: 13px;
	text-align: center;
	opacity: 0;
	-webkit-transition: .2s;
	transition: .2s;
	-webkit-transform: scale(.4);
	transform: scale(.4);
}
.tagcloud ul li span::after {
	position: absolute;
	top: 50%;
	left: -8px;
	content: '';
	width: 0;
	height: 0;
	margin-top: -7px;
	border-color: transparent #3498db transparent transparent;
	border-style: solid;
	border-width: 7px 14px 7px 0;
}
.tagcloud ul li a:hover {
	border: 1px solid #3498db;
	color: #3498db;
}
.tagcloud ul li:hover span {
	right: -26px;
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

＆＃13;

<div class="tagcloud">
      	<ul>
      		<li><a href="#">javascript</a><span>10</span></li>
      		<li><a href="#">android</a><span>6</span></li>
      		<li><a href="#">c++</a><span>20</span></li>
      		<li><a href="#">c</a><span>15</span></li>
      		<li><a href="#">java</a><span>16</span></li>
      		<li><a href="#">html</a><span>4</span></li>
      		<li><a href="#">css</a><span>11</span></li>
      		<li><a href="#">python</a><span>17</span></li>
      		<li><a href="#">artificial intelligence</a><span>5</span></li>
      		<li><a href="#">computer graphics</a><span>9</span></li>
      		<li><a href="#">php</a><span>8</span></li>
      		<li><a href="#">computer audio</a><span>7</span></li>
      		<li><a href="#">database</a><span>7</span></li>
      		<li><a href="#">web</a><span>12</span></li>
      		<li><a href="#">sql</a><span>6</span></li>
      	</ul>
      </div>

＆＃13;

Answer 1

这可能无法直接回答您的问题，因为在我看来，隐藏元素比删除它要容易得多（或等待删除）。

触发输入事件后，我们需要确定每个元素做一些动画或忽略它。在做动画的情况下，我们需要确定2个动画之间的更多动画，这些动画是退出动画（动画元素然后隐藏它）和条目动画（显示元素然后动画它）。

input.addEventListener('input', event => {
  let re = new RegExp(input.value)

  ul.querySelectorAll('li').forEach(li => {
    let isHidden = li.style.display === 'none'
    let shouldHide = !re.test(li.textContent)

    if (shouldHide && !isHidden) {
      // Play exit animation
    }

    if (!shouldHide && isHidden) {
      // Play entry animation
    }
  })
})

我建议使用javascript动画库（例如我使用animejs）来处理动画而不是纯css动画，因为我们需要切换不适用于纯CSS的显示。

请参阅完整示例here。

我希望这有帮助。感谢。

在DOM上更改动画HTML元素位置

1 个答案: