JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="iPhone.css"/>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<title>Title</title>
</head>
<body>
<ul>
<li id = "list">
<div id = "title" data-displayed="yes">Text</div>
</li>
</ul>
</body>
</html>
CSS
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c2c2c), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #2c2c2c 0%,#ffffff 100%);
font-family: Helvetica;
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
li {
position: relative;
background-image: url("track_row_unselected.png");
display: block;
height: 80px;
}
#title {
position:absolute;
padding:0;
margin:0;
top: 7px;
left: 88px;
width: 175px;
font-size: 15px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 1px 1px 1px #f5f5f5;
opacity:1.0;
}
JavaScript
function listener() {
if(counterLock > 0)return;
counterLock++;
var title = document.getElementById('title');
if (title.dataset.displayed == 'yes') {
title.dataset.displayed = 'no';
setTimeout(function () {
title.style.webkitTransition = "opacity 2.0s ease";
title.style.opacity = 0.0;
}, 0);
setTimeout(function() {
title.style.display = 'none'; counterLock = 0;}, 2000);
}
else {
title.dataset.displayed = 'yes';
title.style.display = 'block';
setTimeout(function () {
title.style.webkitTransition = "opacity 2.0s ease";
title.style.opacity = 1.0;
setTimeout("unLock()",2000);
}, 0);
}
}
function unLock(){
alert("aa");
counterLock = 0;
}
var li = document.getElementById('list');
var counterLock = 0;
li.addEventListener("click", listener, false);