【CSS】transiction 搜索框

HTML

<form class="form-search" role="search">
					<a class="search" href="#"><i class="fa fa-search"></i></a>
					<input class="input-search" type="text" name="" placeholder="输入搜索内容...">
					<a class="hd-search" href="#"><i class="fa fa-times"></i></a>
				  </form>

CSS

.form-search .input-search {
	font-size: 10px;
	font-weight: normal;
	outline: none;
	border: none;
}
.form-search .input-search {
	width: 0;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}
.form-search .hd-search {
	display: none;
	transition: all .3s;
}
.form-search.active .input-search {
	width: 200px;
}
.form-search.active .hd-search {
	display: inline-block;
}

JS

<script>
		(function($) {
			
			$(function() {
				
				//$('.search, .hd-search').on('click', function() {
				//	$('.form-search').toggleClass('active');
				//});
				var $formSearch = $('.form-search')
				$('.search').on('click', function() {
					$formSearch.addClass('active');
				})
				
				$('.hd-search').on('click', function() {
					$formSearch.removeClass('active');
				})
				
			})
			
		})(jQuery)
	</script>