CODEWITHSUNDEEP
javascripthtmlcss
Niels Vanwingh
Niels Vanwingh

Reputation: 604

Animate HTML5 Element being Removed in Javascript

I have a button which makes a rectangular surface appear and reappear on clicking. Clicking the button one time makes the "home_card" appear, clicking it again makes it disappear. The appearing effect functions at it should, I have a problem with animating the surface when it is being removed.

I am trying to use an eventlistener on the home_card element and then only remove the element on 'transitionend'. This is the way I read it should be done, but I am still doing something wrong. Can anyone spot the error?

My javascript file is the following: 

function card_AppearsHome() {


if (transition_counter == 1){

    HOW CAN I INSERT A "DISAPPEARING TRANSITION" before removing the element? I know you can use an eventlistener for the "ontransitionend" event, but not how you can do it.. 

    document.getElementById("white_background_top").removeChild(home_card);
    transition_counter = 0;
}

else {

    //card/ div is created and appears, need to select a tranform: transition method 
    home_card = document.createElement('div');
    home_card.id = "home_card";
    home_card.className = "homecard_appear"

    document.getElementById("white_background_top").appendChild(home_card);

    transition_counter = 1;
}
}

This is the code in CSS with first the functioning appearing effect.. 

/* card appearing effect */
.homecard_appear{
animation-name: card_app_anim;
animation-duration: 4s;
}

/* standard transition */
@keyframes card_app_anim {
from {left: 54vw;}
to {left: 94vw;}
}

/* Safari 4.0 - 8.0 transition */
@-webkit-keyframes card_app_anim {
from {left: 54vw;}
to {left: 94vw;}
}

This is the code in CSS for the disappearing effect, I cannot wrap my head around how to do it properly in the Javascript file.. 

/* card disappearing effect */
.homecard_dissappear{
animation-name: card_dis_anim;
animation-duration: 4s;
}

/* standard transition */
@keyframes card_dis_anim {
from {left: 94vw;}
to {left: 54vw;}
}

/* Safari 4.0 - 8.0 transition */
@-webkit-keyframes card_dis_anim {
from {left: 94vw;}
to {left: 54vw;}
}

Upvotes: 3

Views: 99

Answers (1)

tao
tao

Reputation: 90103

This should do it (replace the code section where you ask the question with it):

if (transition_counter === 1) {
  const home_card = document.querySelector('#homeCard');
  home_card.addEventListener('onanimationend', function() {
    home_card.remove();
    transition_counter = 0;
  });
  home_card.classList.add('homecard_dissappear');
}

It adds an event listener for onanimationend (which removes the element and resets your transition_counter) and adds the homecard_dissappear class (which initiates the transition). When transition ends, the event fires, the function is run.

Consider updating the question with a minimal reproducible example if you have any trouble implementing, and i'll update my answer.

Initially my example wrongly used ontransitionend (suggested in the question) and revolved around providing the syntax of adding an event listener, as that seemed to be OP's main issue.

However, as well pointed by folo and Hitesh Lala in the comments, the above animation will not trigger ontransitionend, as it doesn't contain any transition. Therefore, the proper event to bind to is onanimationend.

Upvotes: 2

Related Questions