niahoo/index.html

## index.html
<!doctype html>
<meta charset="utf-8" />


<style type="text/css">
	* {
		margin:0;
		padding:0;
		font-family: monospace;
	}
	#wrap {
		margin:auto;
		width:316px;
		border:1px solid #aaa;
		padding:5px;
	}
	li {
		list-style:none outside none;
		border:2px solid rgb(86, 118, 10);
		margin-bottom:3px;
		padding:0 3px;
		line-height:30px;
		font-size:25px;
		background-color:rgb(120, 166, 78);
		color:white;
		font-weight: bold;
		width:300px;
		height:30px;

		transition-property:        width, border-width, height, margin-bottom;
		transition-duration:        .3s,   1ms,          .1s,    .1s;
		transition-timing-function: ease,  linear,       ease,   ease;
		transition-delay:           .2s,   .1s,          0,    0;
	}
	li span {
		opacity:1;

		transition:         opacity .1s ease .3s;
	}
	li.hidden {
		width:0;
		padding:0;
		height:0;
		overflow:hidden;
		border-width: 0;
		margin-bottom:0;
		transition-delay:           .1s,   .2s,          .3s,    .3s;

	}
	li.hidden span {
		opacity:0;
		transition:         opacity .1s ease;
	}
</style>

<div id="wrap">
	<button id="reset">Reset</button>
	<br/>
	<p>Click on an item list to remove it.</p>
	<br/>
	<ul id="list">
		<li><span>CAN</span></li>
		<li><span>NDS</span></li>
		<li><span>VAN</span></li>
		<li><span>CEP</span></li>
		<li><span>INT</span></li>
		<li><span>VEN</span></li>
	</ul>
</div>

<script type="text/javascript">


	var ul = document.getElementById('list')
	ul.addEventListener('click', function(evt){
		console.log('clicked',evt)
		var li = evt.target.tagName === 'SPAN' ? evt.target.parentNode : evt.target
		li.classList.add('hidden')
		setTimeout(function(){
			li.classList.remove('hidden')
		}, 2000)
	})

	var bt = document.getElementById('reset')
	bt.addEventListener('click', function(){
		console.log('button clicked')
		var lis = document.getElementsByTagName('li')
		console.log('lis',lis)
		for (var i = 0, l = lis.length; i < l; i++)
			if (lis[i].classList.contains('hidden'))
				lis[i].classList.remove('hidden')
	})
</script>
	<!doctype html>
	<meta charset="utf-8" />


	<style type="text/css">
	* {
	margin:0;
	padding:0;
	font-family: monospace;
	}
	#wrap {
	margin:auto;
	width:316px;
	border:1px solid #aaa;
	padding:5px;
	}
	li {
	list-style:none outside none;
	border:2px solid rgb(86, 118, 10);
	margin-bottom:3px;
	padding:0 3px;
	line-height:30px;
	font-size:25px;
	background-color:rgb(120, 166, 78);
	color:white;
	font-weight: bold;
	width:300px;
	height:30px;

	transition-property: width, border-width, height, margin-bottom;
	transition-duration: .3s, 1ms, .1s, .1s;
	transition-timing-function: ease, linear, ease, ease;
	transition-delay: .2s, .1s, 0, 0;
	}
	li span {
	opacity:1;

	transition: opacity .1s ease .3s;
	}
	li.hidden {
	width:0;
	padding:0;
	height:0;
	overflow:hidden;
	border-width: 0;
	margin-bottom:0;
	transition-delay: .1s, .2s, .3s, .3s;

	}
	li.hidden span {
	opacity:0;
	transition: opacity .1s ease;
	}
	</style>

	<div id="wrap">
	<button id="reset">Reset</button>
	<br/>
	<p>Click on an item list to remove it.</p>
	<br/>
	<ul id="list">
	<li><span>CAN</span></li>
	<li><span>NDS</span></li>
	<li><span>VAN</span></li>
	<li><span>CEP</span></li>
	<li><span>INT</span></li>
	<li><span>VEN</span></li>
	</ul>
	</div>

	<script type="text/javascript">


	var ul = document.getElementById('list')
	ul.addEventListener('click', function(evt){
	console.log('clicked',evt)
	var li = evt.target.tagName === 'SPAN' ? evt.target.parentNode : evt.target
	li.classList.add('hidden')
	setTimeout(function(){
	li.classList.remove('hidden')
	}, 2000)
	})

	var bt = document.getElementById('reset')
	bt.addEventListener('click', function(){
	console.log('button clicked')
	var lis = document.getElementsByTagName('li')
	console.log('lis',lis)
	for (var i = 0, l = lis.length; i < l; i++)
	if (lis[i].classList.contains('hidden'))
	lis[i].classList.remove('hidden')
	})
	</script>