Question

我想为自己的搜索引擎制作动画，但我不知道该怎么做。

我的HTML中有这个

<div id="companyRoster" class="companyRoster container">
    <div class="row mb-2">
        <div class="col-lg-1 col-md-2 col-sm-3 col-6 employee">
            <img src="images/j-doe.jpg" alt="..." class="img-fluid rounded-circle padding-0" data-toggle="popover" title="John Doe" data-placement="bottom" data-content='<b>Position:</b> Team Leader Integration Services <br> <b>Department:</b> IT <br> <b>Email:</b> <a href="mailto:j.doe@aaa.aa">j.doe@aaa.aa</a> <br> <b>Skype:</b> <a href="skype:j.doe?userinfo">j.doe</a>'><i hidden>J Doe Team Leader Integration Services</i>
        </div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-6 employee">
            <img src="images/john-d.jpg" alt="..." class="img-fluid rounded-circle padding-0" data-toggle="popover" title="John Doe" data-placement="bottom" data-content='<b>Position:</b> Software Engineer <br> <b>Department:</b> IT <br> <b>Email:</b> <a href="mailto:john.d@aaa.aa">john.d@aaa.aa</a> <br> <b>Skype:</b> <a href="skype:john.d?userinfo">john.d</a>'><i hidden>John D Software Engineer</i>
        </div>
    </div>
</div>

搜索引擎本身是：

$(document).ready(function(){
  $("#searchField").on("keyup", function() {
    var value = $(this).val().toLowerCase();
      $(".employee").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

它现在就像一种魅力一样工作，但是我想在其他所有元素消失后又再出现时（例如淡入/淡出）添加动画。

当前外观：

Answer 1

您可以“发挥”可见度和不透明度。在每个员工中添加 .show 类。在搜索字段中的每个键入事件中，从所有员工中删除类别 show ，然后仅将其添加到将要显示的员工中。还可以使用setTimeout函数来实现淡入淡出效果。检查更新的jsfiddle波纹管：

$(document).ready(function(){
	$("#searchField").on("keyup", function() {
		var value = $(this).val().toLowerCase();
		$(".employee").removeClass("show");

		setTimeout(function() {
			$(".employee").filter(function() {
				$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1).addClass("show");
			});
		},300);
	});
});

<!DOCTYPE html>
<html lang="en">

<head>
	<title>emerchantpay - Company Roster</title>

	<style type="text/css">

	.employee {
		visibility: hidden;
		opacity: 0;
		-webkit-transition: 0.5s all ease;
		-moz-transition: 0.5s all ease;
		-ms-transition: 0.5s all ease;
		-o-transition: 0.5s all ease;
		transition: 0.5s all ease;
	}

	.employee.show {
		visibility: visible;
		opacity: 1;
	}

	.employee > div {
		width: 200px;
		height: 200px;
		background: red;
		margin: 10px;
		float: left;
	}

</style>
</head>

<body>

	<form class="form-inline mx-auto">
		<button class="home btn btn-outline-success btn-margin-right active" type="button">Company Roster</button>
		<button class="room btn btn-outline-success btn-margin-right" type="button">Room Location</button>
		<button class="responsibilities btn btn-outline-success btn-margin-right" type="button">App Responsibilities</button>
		<div class="input-group">
			<input type="text" class="form-control col-8" placeholder="Search" aria-label="search" aria-describedby="btnGroupAddon" id="searchField">
			<div class="input-group-prepend">
				<div class="input-group-text" id="btnGroupAddon"><i class="material-icons">search</i></div>
			</div>
		</div>
	</form>

	<div id="companyRoster" class="companyRoster container">
		<div class="row mb-2">
			<div class="col-lg-1 col-md-2 col-sm-3 col-6 employee show">
				<div>

				</div>
				<i hidden>J Doe Team Leader Integration Services</i>
			</div>
			<div class="col-lg-1 col-md-2 col-sm-3 col-6 employee show ">
				<div>

				</div>      <i hidden>J Doe Team Leader Integration Services</i>      
			</div>
			<div class="col-lg-1 col-md-2 col-sm-3 col-6 employee show">
				<div>

				</div>  <i hidden>J Doe Team Leader Integration Services</i>         
			</div>
		</div>
		<div class="row mb-2">
			<div class="col-lg-1 col-md-2 col-sm-3 col-6 employee show">
				<div>

				</div>
			</div>
			<div class="col-lg-1 col-md-2 col-sm-3 col-6 employee show">
				<div>

				</div>
			</div>
			<div class="col-lg-1 col-md-2 col-sm-3 col-6 employee show">
				<div>

				</div>            
			</div>
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>

</html>

Answer 2

这是您要找的东西。同位素被广泛使用并且容易 *.scss https://codepen.io/desandro/pen/wfaGu

还有其他有关如何使用同位素的示例。 ion-input { &.custom-class { --placeholder-color: #fff; } } https://isotope.metafizzy.co/filtering.html

Answer 3

如果只需要淡入淡出效果，可以使用fadeToggle（）jQuery函数

如何在滤镜/切换效果上制作动画

3 个答案: