I have successfully implemented a feature in my code where an item slides to the left and gets deleted. However, I am facing an issue where after deleting the element, a new element is created on the right side of the screen but it appears in the center without the intended animation.
<!DOCTYPE html>
<html>
<head>
<title>Slide Animation Issue</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
.leftRemove{
left: -3000px;
}
.rightAdd{
position: relative;
right: -3000px;
transition: right 2s;
-webkit-transition: right 2s;
}
.centerFocus{
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
right: 0px;
background-color: green;
transition: left 2s;
-webkit-transition: left 2s;
}
</style>
<script>
$(document).on('click', '#main', function(){
$('body').append("<div class='rightAdd'>Hello!</div>");
$( "#main" ).addClass('leftRemove');
setTimeout(function(){
$('.leftRemove').remove();
$('.rightAdd').attr('id', 'main');
}, 800);
setTimeout(function(){
$( "#main" ).removeClass('rightAdd');
$( "#main" ).addClass('centerFocus');
}, 1000);
});
</script>
</head>
<body>
<div id='main' class='centerFocus'></div>
</body>
</html>
Any ideas on how to fix this issue?