Remove class from the dom after transition fadeout effect is done

JavaScript
1

What I want to do is remove it from the dom after the transition effect finishes.

After the play image’s fade out effect finishes, then I want it to be removed.

How would I add that to the code?

Like this?
https://jsfiddle.net/tw5oeLmg/

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    setTimeout(function() {
      const fadeout = document.querySelector(".fadeout");
      fadeout.classList.add("fade");
    }, 5000);
    setTimeout(function() {
      const splitwrap = document.querySelector(".split-wrap");
      splitwrap.classList.add("hide");
    }, 10000);
    const thewrap = curtain.parentElement.querySelector(".container");
    show(thewrap);
  }

  const cover = document.querySelectorAll('.jacketa');
  cover.forEach(function(el) {
    el.addEventListener('click', coverClickHandler)
  });
}());
2

If I understand what you want then this can be done in CSS as I mentioned before.

.slide .split-wrap{
  opacity:0;
  transition:opacity 5s ease 5s,width 0s 10s, height 0s 10s,transform 0s 10s;
  height:0;
  width:0;
  transform:translateX(-100vw);
  pointer-events:none;
  z-index:-1;
}

Then you won’t need:

/*
    setTimeout(function() {
      const fadeout = document.querySelector(".fadeout");
      fadeout.classList.add("fade");
    }, 5000);
    setTimeout(function() {
      const splitwrap = document.querySelector(".split-wrap");
      splitwrap.classList.add("hide");
    }, 10000);
    
    */

However the JS seems to be doing what you want also.

1 Like
3

Actually the transform needs to be removed as it stops the right one sliding.

.slide .split-wrap{
  opacity:0;
  transition:opacity 5s ease 5s,width 0s 10s, height 0s 10s;
  height:0;
  width:0;
  pointer-events:none;
  z-index:-1;
}
1 Like
4

This will work
https://jsfiddle.net/w4f8kz2x/

I was trying to figure out what those 2 numbers meant, I guess everyone writes it in short form, opacity 3s 3s;

 .fadeout .split-wrap{
  opacity: 0;
  transition: opacity 3s ease 3s;
}

function slideCurtain() {
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    curtain.classList.add("fadeout");
    const thewrap = curtain.parentElement.querySelector(".container");
    show(thewrap);
  }

Keeping this so that it removes the .split-wrap from the dom.

  function delayHideSplitWrap() {
    setTimeout(function() {
      const splitwrap = document.querySelector(".split-wrap");
      splitwrap.classList.add("hide");
    }, 5000);
  }

And this so from the onset, it works before .split-wrap is removed from the dom.

    const splitWrap = document.querySelector(".split-wrap");
    splitWrap.style.pointerEvents = "none";

And so now none of this stuff is needed.

width 0s 10s, height 0s 10s;
  height:0;
  width:0;
  pointer-events:none;
  z-index:-1;
}
5

The first 3s is the transition duration. The second 3s is the delay before the transition starts.

That means you can time your transitions to work with whatever else you have going on.

Bear in mind that js timings may not necessarily coincide with css timings which is why I suggest that css handles all of it.

2 Likes
6

How are these supposed to be added?

I keep receiving errors.

unknown word, then missing semicolon.

https://jsfiddle.net/vps8wgjh/1/

width 0s 10s, height 0s 10s;
  height:0;
  width:0;
7

You divorced the transition values from the transition property.

  transition: opacity 3s ease 3s;
  width 0s 10s, height 0s 10s;

It should be a comma separated list of values.:

transition: opacity 3s ease 3s, width 0s 10s, height 0s 10s;

1 Like
8

This seems to be completely backwards. We are not supposed to be using JS to replace CSS. We are supposed to be doing things the other way with CSS taking on more of what JS used to do.

Less JS is the key.

1 Like
9

Should width 0s 10s, height 0s 10s;

Be used on all opacity transitions?

or only certain ones?

Like for the play image that splits apart, but not for a fading background image?

10

That’s up to you as long as you are setting pointer-events to none then it won’t mask anything if it is still full height and width. It all depends on the situation.

The width and height of zero will essentially make the element have no size (unless padding/borders have been set) and then browsers that don’t understand pointer events will not have a blocking element.

In your example you are showing a video player after the cover has faded and if you didn’t remove the pointer-events from the cover or increase the z-index of the video then you could never click the video.

The reason we do this is because we can’t animate display:none (which is a pity). When something is display:none its already gone and the display value is not animatable. These are just the ways we work around this.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.