Transition fade-out not working on close btn

JavaScript
1

Hello Coders,

i have a quick questions seems like i’m able to have some transitions on my list items when i click the add List button. So it does the fade in, but when im closing the list items it wont work on fade-out. (using keyframes one for each transition for fade-in, fade-out). So first i wanted to try two different approaches.

  1. The long way with creating elements from scratch.
  2. with insertAdjacentHTML.

but both dont seem to work on the close button, wont do the fade-out effect.
for the close btn im using event delegation. so not sure if that is the problem on adding the class fade-out, that is were its not working.

Here is the basic layout as well the codepen link.

The HTML

<button id="send">Add List!</button>
<div id="results">
  <!-- <div class="content fade-in">
    <p>items</p>
    <span class="close" id="closeBtn">X</span>
  </div> -->
</div>

For the CSS styles

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


.fade-out {
  	opacity: 1;
  	animation-name: fadeInOpacityOut;
  	animation-iteration-count: 1;
  	animation-timing-function: ease-in;
  	animation-duration: 1s;
  }
  @keyframes fadeInOpacityOut {
  	0% {
  		opacity: 1;
  	}
  	100% {
  		opacity: 0;
  	}
  }

The JS


const closeBtn = document.getElementById('results');
closeBtn.addEventListener('click', closeList);

function closeList(e){
  if( e.target.classList.contains('close') ){
    const removeSection = e.target.parentElement;
    removeSection.className = 'fade-out';
    removeSection.parentElement.removeChild(removeSection);

  }

};

CodePen link
https://codepen.io/ivanmt07/pen/GRJmQbz

2

You are removing the element before the animation has a chance to finish.

  1. I’d suggest using the classList.add and classList.remove (there is also a toggle method) for adding and removing classes (classList, DOMTokenList).

  2. Remove the fade-in class first then add the fade-out class.

  3. Wrap the code that removes the element in a setTimeout that has a delay a bit longer than the animation duration.

  4. Add animation-fill-mode: forwards to the fade-out class.

3

Hi @lasjorg i have read what you wanted me to do, but seems like its not working for some reason as far as the transition its concern, the setTimeout its working but not the transition, this is the code that i have so far not sure and updated codepen as well. I’m missing something or maybe not sure, if its what you are asking.

codepen:
https://codepen.io/ivanmt07/pen/GRJmQbz

const closeBtn = document.getElementById('results');
closeBtn.addEventListener('click', closeList);

function closeList(e){
  if( e.target.classList.contains('close') ){
    const removeSection = e.target.parentElement;
    setTimeout(function(){
      removeSection.classList.remove('fade-in');
      console.log(removeSection);
      
    }, 3000);

    removeSection.classList.add('fade-out');
    removeSection.parentElement.removeChild(removeSection);

  }

};
4

So it seems i finally have it right!!! so it seems that the setTimeout works as a perfect timing. I supposed to wrap it with this following code removing the li list, this gives time for the code line to be executed. and then add and remove the transition, that works perfect.

setTimeout(function(){
      removeSection.parentElement.removeChild(removeSection);
    }, 2000);

full code removing with transition:

const closeBtn = document.getElementById('results');
closeBtn.addEventListener('click', closeList);

function closeList(e){
  
  if( e.target.classList.contains('close') ){
    const removeSection = e.target.parentElement;

    setTimeout(function(){
      removeSection.parentElement.removeChild(removeSection);
    }, 2000);
       removeSection.classList.remove('fade-in');  
       removeSection.classList.add('fade-out ');
  }
  
};