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

Question

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

Я не работал с AWS appsync, поэтому я не знаю, в чем проблема. Я могу просто предложить вам одну вещь, добавить функцию распознавания обещаний. Таким образом, вы можете видеть, что он возвращает, и это предотвратит показ какого-либо предупреждения. Что-то вроде -

jwtToken: async () => (await Auth.currentSession() .then(data => { console.log("data",data); return data }) .catch(err => { console.log("error",error); return err })).getIdToken().getJwtToken()

1

javascript jquery html twitter-bootstrap bootstrap-4

задан PunkoHead 20 January 2019 в 09:27

2 ответа

Другие вопросы по тегам:

javascript jquery html twitter-bootstrap bootstrap-4

Похожие вопросы:

score 0 · Answer 1

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

0

ответ дан J.Pelle 20 January 2019 в 09:27

score 0 · Answer 2

Вы можете «играть» с прозрачностью и прозрачностью. Добавьте класс .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>