Как сделать анимацию на эффекте фильтра / переключения - PullRequest
Новая
       5

Как сделать анимацию на эффекте фильтра / переключения

0 голосов
/ 20 января 2019

Я хочу сделать анимацию для своей поисковой системы, которая у меня есть, но я не знаю, как это сделать.

У меня есть это в моем 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>

Сама поисковая системаis: 

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

Сейчас это работает как очарование, но я хочу добавить анимацию, когда все остальные исчезают и когда они появляются снова (что-то вроде затухания / затухания).

Текущий вид: current look

Ответы [ 3 ]

0 голосов
/ 20 января 2019

Вы можете «играть» с видимостью и непрозрачностью. Добавьте .show класс в каждого сотрудника. В каждом событии keyup в поле поиска удалите класс 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>
0 голосов
/ 20 января 2019

Вот то, что вы ищете.Изотоп широко используется и легко link: https://codepen.io/desandro/pen/wfaGu

Существуют и другие примеры использования изотопа.link: https://isotope.metafizzy.co/filtering.html

0 голосов
/ 20 января 2019

если вы просто хотите использовать эффект затухания, вы можете использовать jquery-функцию fadeToggle ()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...