Remove whitespace after css translate animation

130
June 16, 2018, at 11:00 PM

I want to animate a a collection of divs on a page (#sections) in such a way that a the first div (#splash) acts a splash page to greet the user and then can never be scrolled to again/removed. I have done this using css transforms but whitespace is revealed where #sections previously occupied. How can I achieve this functionality whilst not revealing whitespace?

const sections = document.querySelector('#sections'); 
const body = document.body; 
 
function intro() { 
    body.classList = 'hide-splash' 
} 
 
document.addEventListener("DOMContentLoaded", function() { 
    setTimeout(() => { 
        intro() 
    }, 1000); 
});
#splash, 
#main { 
  height: 100vh; 
  width: 100vw; 
} 
#sections { 
  transform: translateY(0vh); 
  transition: transform 1s ease; 
} 
.hide-splash #sections { 
  transform: translateY(-100vh); 
} 
 
 
 
 
 
#splash { 
  background-color: #ffa500; 
} 
#main { 
  background-color: lightcyan; 
} 
#secondary { 
  background-color: lightcoral; 
} 
footer { 
  background-color: Aquamarine; 
}
<div id="wrapper"> 
        <div id="sections"> 
            <div id="splash">SPLASH</div> 
            <div id="main">MAIN</div> 
            <div id="secondary"> 
                <ul> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                </ul> 
            </div> 
            <footer> 
                <ul> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                </ul> 
            </footer> 
        </div> 
    </div>

Answer 1

There is many options:

const sections = document.querySelector('#sections'); 
const body = document.body; 
 
function intro() { 
    body.classList = 'hide-splash' 
} 
 
document.addEventListener("DOMContentLoaded", function() { 
    setTimeout(() => { 
        intro() 
    }, 1000); 
});
#splash, 
#main { 
  height: 100vh; 
  width: 100vw; 
} 
#splash { 
  transition: transform 1s, height 1s; 
} 
.hide-splash #splash { 
  transform: translateY(-100vh); 
  height: 0; 
} 
 
 
#splash { 
  background-color: #ffa500; 
} 
#main { 
  background-color: lightcyan; 
} 
#secondary { 
  background-color: lightcoral; 
} 
footer { 
  background-color: Aquamarine; 
}
<div id="wrapper"> 
        <div id="sections"> 
            <div id="splash">SPLASH</div> 
            <div id="main">MAIN</div> 
            <div id="secondary"> 
                <ul> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                    <li>SECONDARY</li> 
                </ul> 
            </div> 
            <footer> 
                <ul> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                    <li>FOOTER</li> 
                </ul> 
            </footer> 
        </div> 
    </div>

READ ALSO
Dropdown list appearing behind widget. Fixable?

Dropdown list appearing behind widget. Fixable?

I really hope I'm writing this in the right place, my apologies if notI recently changed my Wordpress theme and in doing so, one of the dropdown menu's which I had runnng perfectly on my old design is no longer displaying correctly

96
Multiply value with unit in styled component

Multiply value with unit in styled component

I have a styled component like this:

64
Styling React Bootstrap Dropdown button div

Styling React Bootstrap Dropdown button div

I have a react bootstrap single button dropdownI am trying to add margin space between the dropdown button and another element I have on the screen

130