Html - Transition on Div visibility?

Skate_790
December 20, 2023
76 views
2 votes
3 Answers

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?

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

<div class="content active" 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>
<script>
  let currentPage = 1;

  function changeContent(page) {
    document.getElementById(`content${currentPage}`).classList.remove('active');
    currentPage = page;
    document.getElementById(`content${currentPage}`).classList.add('active');
  }
</script>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }
  
  .content {
    display: none;
    animation: fade 2s ease-in;
  }
  
  .active {
    display: block;
  }
  
  .pagination {
    margin-top: 20px;
  }
  
  .pagination button {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
  }
  
  @keyframes fade {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>

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.

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 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 1;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

<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>

You can use transition on opacity. Set all contents position to absolute, so they can overlap on each other in a parent div.

const contents = document.querySelectorAll('[id^=content]');
let currentPage = 1;

function showContent(page) {
  contents[currentPage - 1].className = 'hidden content';
  contents[page - 1].className = 'visible content';
  currentPage = page;
}

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

#container {
  position: relative;
  height: 150px;
}

.content {
  position: absolute;
  transition: ease-in-out all 1s;
}

.hidden {
  opacity: 0;
  transform: scale(.1);
}

.visible {
  opacity: 1;
  transform: scale(1);
}

.pagination {
  position: relative;
  margin-top: 20px;
}

.pagination button {
  cursor: pointer;
  padding: 10px;
  margin: 5px;
}

<div id="container">
  <div class="visible content" id="content1">
    <h2>Content 1</h2>
    <p>this is the first content</p>
  </div>
  <div class="hidden content" id="content2">
    <h2>Content 2</h2>
    <p>this is the second content</p>
  </div>
  <div class="hidden content" id="content3">
    <h2>Content 3</h2>
    <p>this is the third content</p>
  </div>
</div>

<div class="pagination">
  <button onclick="showContent(1)">1</button>
  <button onclick="showContent(2)">2</button>
  <button onclick="showContent(3)">3</button>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Transition on Div visibility?

Answers