Commit bca4e1f7 authored by sparshtripathi's avatar sparshtripathi
Browse files

Added delete animation

parent 0b86553d
......@@ -4,35 +4,16 @@ let ultasks = document.querySelector('.ultasks');
let listitem;
let header = document.getElementById('header');
addtasktxt.focus();
// $(window).scroll(function () {
// if ($(window).width() < 1000) {
// // if ($(window).scrollTop() >= 198)
// if($(window).scrollTop() >= header.offsetHeight-25){
// $('#content').addClass('fix-search');
// } else {
// $('#content').removeClass('fix-search');
// }
// }
// else {
// //if ($(window).scrollTop() >= 126)
// if($(window).scrollTop() >= header.offsetHeight-25){
// $('#content').addClass('fix-search');
// } else {
// $('#content').removeClass('fix-search');
// }
// }
// });
$(window).scroll(function(){
if($(window).scrollTop() >= header.offsetHeight-25){
$('#content').addClass('fix-search');
} else {
$('#content').removeClass('fix-search');
}
$(window).scroll(function () {
if ($(window).scrollTop() >= header.offsetHeight - 25) {
$('#content').addClass('fix-search');
} else {
$('#content').removeClass('fix-search');
}
});
function addTask() {
......@@ -49,7 +30,10 @@ function addTask() {
listtxt.appendChild(document.createTextNode(addtasktxt.value));
ultasks.prepend(listitem);
listitem.classList.add('added');
listitem.addEventListener('click', onItemClick);
completediv = document.createElement('div');
......@@ -68,10 +52,22 @@ function addTask() {
removebtn.innerHTML = '<i class="fas fa-trash"></i>';
completediv.appendChild(removebtn);
starbtn = document.createElement('button');
starbtn.className = "starbtn";
starbtn.innerHTML = '<i class="far fa-star"></i>';
completediv.appendChild(starbtn);
/*
Star button
*/
// starbtn = document.createElement('button');
// starbtn.className = "starbtn";
// starbtn.innerHTML = '<i class="far fa-star"></i>';
// completediv.appendChild(starbtn);
/*
Star button
*/
}
......@@ -93,7 +89,15 @@ function onItemClick(event) {
else {
if (classList.contains('removebtn') || classList.contains('fa-trash')) {
event.target.closest('li').remove();
event.target.closest('li').classList.remove('added');
event.target.closest('li').classList.add('delete');
console.log('test');
if (event.target.closest('li').classList.contains('delete')) {
setTimeout(function () { event.target.closest('li').remove() }, 300);
// event.target.closest('li').remove();
}
}
if (classList.contains('starbtn') || classList.contains('fa-star')) {
starbtn.innerHTML = '<i class="fas fa-star"></i>';
......
......@@ -46,10 +46,6 @@ body {
padding-bottom: 55px;
}
/* #title {
animation: animated-text 2s steps(11, end) 0.5s 1 normal both, animated-cursor 750ms steps(11, end) infinite;
} */
.todohead {
font-family: 'Zen Tokyo Zoo', cursive;
font-size: 30px;
......@@ -85,9 +81,6 @@ form {
}
@media(max-width:1000px) {
/* html {
zoom: 125%;
} */
form {
width: 80%;
}
......@@ -180,19 +173,60 @@ input:focus {
min-width: 200px;
margin-bottom: 10px;
border-radius: 7px;
}
li.added {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.8s;
animation-duration: 0.5s;
}
li.delete {
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 0.3s;
}
li.done.delete {
animation-name: fadeOutOpacity2;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 0.3s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
@keyframes fadeOutOpacity {
0% {
opacity: 1;
transform: translateX(0px);
}
100% {
opacity: 0;
transform: translateX(100px);
}
}
@keyframes fadeOutOpacity2 {
0% {
opacity: 0.5;
transform: translateX(0px);
}
100% {
opacity: 0;
transform: translateX(100px);
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment