Splash Screen not functioning

user_14602176 0
Viewed 172

I am trying to make a splash screen that disappears after 4 seconds. I am trying to do this by adding the display-none class to the splash class through JS, but the class is not being added, so the splash screen is still being displayed. Here is the codepen of the issue:

https://codepen.io/dbake3452/pen/VwmeoGa

///HTML

<div class="splash">
      <img class="fade-in" src="images/pippinhop.png">
</div>


///SASS

.splash {
    width: 100%;
    height: 100vh;
    background-color: #a9aaff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;

    .display-none {
        display: none;
    };

    img {
        width: 12.5%;
    }
}

@keyframes fadeIn{
    to {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in forwards;
}



///JS

const splash = document.querySelector('.splash');

document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('display-none');
 }, 4000);
});'
splash-screen sass css html javascript
3 Answers

the issue is all about your css definition.

.splash {
    .display-none {}
}

This css style means, find element with the class of .splash then find it's children which has .display-none class and style it according to the style definition. You may want to change the SASS code to this, making it a global style solves the problem:

.display-none {
    display: none;
}
.splash {
...

or you have one option to make it .splash.display-none with & keyword as shown here:

.splash {
/* Your style...*/
    &.display-none {
        display: none;
    }

}

The &.classname2 in .classname1 equals to the .classname1.classname2 css syntax.

Here is an example:

.classname1 {
    &.classname2 {
    /*style...*/
    }
}

in css you'd write this:

.classname1.classname2 {
    /*style...*/
}

And this can be described as "find the elements which has the .classname1 and .classname2, and style accordingly".

I hope this helps! :D

user_102738270

Looking at your Codepen it appears that your JS is fine because I do see the class being added. If you remove the semicolon from after the "display-none" class, it will work.

user_131748500

The way the SCSS is written it is rendering the CSS as

.splash .display-none {
  display: none;
}

The space between the two selectors is significant.

The descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

(from https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator) so, as others have pointed out, you need to separate out the definition of the display-none class. The rendered CSS needs to look like this:

.splash.display-none {
  display: none;
}
user_108674540
Related