So i have a pagination that changes content and i want this change of content to have a transition, but i cant figure out how i get this to work
let currentPage = 1;
function changeContent(page) {
document.getElementById(`content${currentPage}`).classList.remove('active');
currentPage = page;
document.getElementById(`content${currentPage}`).classList.add('active');
}
// Zeige den ersten Inhalt beim Laden der Seite an
changeContent(currentPage);
body {
font-family: Arial, sans-serif;
margin : 20px;
}
.content {
display : none;
}
.active {
display : block;
}
.pagination {
margin-top : 20px;
}
.pagination button {
cursor : pointer;
padding : 10px;
margin : 5px;
}
<div class="content" id="content1">
<h2>Content 1</h2>
<p>this is the first content</p>
</div>
<div class="content" id="content2">
<h2>Content 2</h2>
<p>this is the second content</p>
</div>
<div class="content" id="content3">
<h2>Content 3</h2>
<p>this is the third content</p>
</div>
<div class="pagination">
<button onclick="changeContent(1)">1</button>
<button onclick="changeContent(2)">2</button>
<button onclick="changeContent(3)">3</button>
</div>
so i want it to have a smooth transition on the "function changeContent" function, like a fade or something between the contents that are shown on screen, where do i add the transition, can i even add a transition as easy as i think?
3
Answers
I’m sorry to say that the styles z-index and display dont support transition,but for your demo there is a simple way to implement the same effect,that is animation
Easiest would be to use css transitions like what ive added to your code
here is the link for it https://www.w3schools.com/css/css3_animations.asp|
Basically Any of the CSS styles you can edit with these CSS
animations .
you could use JS to derive the same type of animation by getting the elemnt byID and then grabing its CSS class proporties and having an internal timer . Its allot of work to do it that way its just "cheaper" to get the same result with css animations and you dont need the whole JS animation boilerplate for something straight forward.
You can use transition on
opacity
. Set all contentsposition
toabsolute
, so they can overlap on each other in a parent div.