JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />





<div class="container">
		<div class="touch">
			<span>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.</span> 	
		</div>
		<div class="delete">Delete</div>
	</div>
	
	<div class="container">
		<div class="touch">
			<span>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. 	</span>
		</div>
		<div class="delete">Delete</div>
	</div>
	
	<div class="container">
		<div class="touch">
			<span>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.</span> 	
		</div>
		<div class="delete">Delete</div>
	</div>

CSS

*{
			margin:0;
			padding: 0;
			-webkit-text-size-adjust:none;
			-webkit-tap-highlight-color:transparent;
		}
		
		body{
			background-color:#fff;
		}
		
		.animate{
			-webkit-transition: 100ms all linear;
		}
		
		.swipeOut{
			-webkit-transition: 500ms all linear;
		}
		
		.container{
			position: relative;
			height:50px;
			background-color:#fff;
			overflow:hidden;
			box-shadow:inset 0 -1px 0px #000;
			display: block;
			left:0;
			right:0;
			-webkit-transition:translate3d(0,0,0);
			-webkit-perspective: 1000;
			-webkit-backface-visibility: hidden;
		}
		
		.touch{
			position: absolute;
			left:20px;
			right:0;
			top:0;
			bottom:0;
			background-color:#fff;
			z-index: 2;
			box-shadow:inset 0 -1px 0px #000;
			-webkit-transition:translate3d(0,0,0);
			-webkit-perspective: 1000;
			-webkit-backface-visibility: hidden;
		}
		
		
		.touch:before{
			width:100%;
			top:0;
			bottom: 0;
			background-color:#fff;
			position: absolute;
			content: "";
			margin-left:-100%;
		}
		
		
		.delete{
			width:80px;
			text-align: right;
			right:0;
			position: absolute;
			top:0;
			bottom:0;
			background-color:red;
			z-index: 1;
			box-shadow:inset 0 -1px 0px #000;
		}
		
		span{
			background-color:#fff;
			left:0;
			position:absolute;
		}

JavaScript

var deleteShown;
			var pastZero;
			
			$(".container").on("touchstart", function(e) {
				e.preventDefault();
				
				
				
				
				
				//containerElement = $("#" + e.originalEvent.touches[0].target.parentElement.id);
				containerElement = $(this);
				touchElement = containerElement.find(".touch");
				
				
				/*
				if (containerElement.attr("class") != "container"){
					alert(containerElement.attr("class"))
				}
				*/
				
				
				
				containerElement.data("lastposition", e.originalEvent.touches[0].pageX);
				containerElement.data("originalposition", e.originalEvent.touches[0].pageX);
				containerElement.data("touchclass", e.originalEvent.touches[0].target.className);
				
				lastPosition = parseInt(containerElement.data("lastposition"));
				originalPosition =  parseInt(containerElement.data("originalposition"));
				touchClass =  containerElement.data("touchclass");
				
				if (deleteShown === undefined){
					deleteShown = "false";
				} else {
					deleteShown = containerElement.data("deleteshown");
				}
				
				if (pastZero === undefined){
					pastZero = "false";
				} else {
					pastZero = containerElement.data("pastzero");
				}
				
				
				
				
				
				//console.log(e.originalEvent.touches[0].target.parentNode);
				//console.log($(".shown"));
				
				
				if ($(e.originalEvent.touches[0].target.parentNode).hasClass("shown")){
					
				} else if ($(".shown").length > 0) {
					
					var shownElement = $(".shown");
					
					shownElement.removeData();
					shownElement.find(".touch").addClass("animate");
					setTimeout(function(){
						shownElement.find(".touch").css("-webkit-transform", "translate3d(0, 0, 0)");
						setTimeout(function(){
							shownElement.find(".touch").removeClass("animate");
							shownElement.removeClass("shown");
						}, 190);
					}, 10);
					deleteShown = false;
					containerElement.data("deleteshown",...