Add a transition to fade in and fade out

Question

I created an accordion for the project I'm currently working on. I'm using wordpress so I have the options to use plugins but I want to challenge my self. I'm having trouble on triggering a fade out transition class for a div. The fade in function is working but the fade out is not working. How can I trigger it?

Here's my code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .accordion {
        background-color: #fff;
        color:black;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border-radius: 15px;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.5s;
        box-shadow: 2px 2px 6px #888888;
    }

    .active, .accordion:hover {
        background-color: #ccc; 
    }

    .panel {
        padding: 10px 0;
        display: none;
        overflow: hidden;
        animation: fadeIn 0.2s ease-in both;
    }

    .spaceboy {
        height: 15px;
    }

    .holder {
        padding: 10px;
        background-color: #00000090;
        border-radius: 15px;
        transition: 0.5s;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translate3d(0, -5%, 0);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes fadeOut {
      from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
      to {
        opacity: 0;
        transform: translate3d(0, -5%, 0);        
      }
    }
</style>
</head>
<body>

<button class="accordion">Section 1</button>
<div class="panel">
    <div class="holder">
        <p>text</p>
    </div>
</div>
<div class="spaceboy"></div>

<button class="accordion">Section 2</button>
<div class="panel">
  <div class="holder">
      <p>text</p>
  </div>
</div>
<div class="spaceboy"></div>

<button class="accordion">Section 3</button>
<div class="panel">
  <div class="holder">
      <p>text</p>
  </div>
</div>
<div class="spaceboy"></div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>
</body>
</html>

I hope you can help me. I'm new on the field so I'm having trouble understanding all at once. Thank you!

Please refer to this URL [How to add Fade in, Fade out via CSS](https://blog.hubspot.com/website/css-fade-in) — Syed Arsalan Hussain, Apr 13 '21 at 07:14

Mehrnoosh · Answer 1 · 2021-04-13T08:49:17.383

First, make difference between animating and transitioning, no need to use keyframes for transitioning. You should add the property you want to be transitioned like this:

.accordion {
  /* other css rules */
  visibility: hidden;
  transition: visibility 1s;
}
.accordion.active {
   /* other css rules */
   visibility: visible;
 }

or add other properties you want to be transitioned along like this:

 .accordion {
  /* other css rules */
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 0.5s;
}
.accordion.active {
   /* other css rules */
   visibility: visible;
   opacity: 1;
 }

You cannot transition display property, use visibility and opacity to create fading transitions. I hope this link would help. For complete guide on css transition look at this link

Add a transition to fade in and fade out

1 Answers1