I am trying to create a website on which different pieces of information are stored in different divs. The user clicks on the link, and the current div disappears to transparency and translates to the right, and the new one disappears to the left. The idea is to call a function that adds the fadeOut class to the old div, adds the fadeIn class to the new div, and then removes the extra classes from the old div so that it can start all over again. It can remove only superfluous classes from the old div after all transitions are completed, it will disappear from the old div, and not disappear. I tried to accomplish this using the transition listener, but it seems that the transition function is executed immediately when I create it, and not after the transition actually completes.
I created a JSFiddle with the core of the problem code http://jsfiddle.net/mmmm_cake/Q78pz/4/ , and I copy it here:
<head>
<style>
.page {
position:fixed;
margin-left:15%;
margin-right:15%;
top:40px;
left:-20px;
opacity:0
}
.page.fadeIn {
transition:0.5s;
opacity:1;
left:0px
}
.page.fadeOut {
transition:0.5s;
opacity:0;
left:20px;
}
</style>
<script>
var active = 'about';
function reset(page) {
page.classList.remove('fadeOut');
page.classList.remove('fadeIn');
}
function show(id) {
page = document.getElementById(id);
page.classList.add('fadeIn');
}
function hide(id) {
page = document.getElementById(id);
page.addEventListener('transitionend', reset(page), false);
page.classList.add('fadeOut');
page.removeEventListener('transitionend', reset(page), false);
}
function switchTo(id) {
hide(active);
show(id);
active = id;
}
</script>
</head>
<body onload="show(active)">
<div id="navbar">
<a href="javascript:switchTo('about')">About</a>
<a href="javascript:switchTo('contact')">Contact Us</a>
</div>
<div id="about" class="page">
<h3>
About Us
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div id="contact" class="page">
<h3>
Contact Form
</h3>
<p>
Nulla quis commodo arcu. Etiam facilisis risus nulla, vel tempus arcu ultricies eu.
</p>
</div>
</body>
I tried to configure it in different ways, and as far as I can tell, it all comes down to the fact that the transition event does not fire properly. I have seen many people saying that they don’t work for them at all, but does anyone know how to fix this when it works too soon?
source
share