Transition doesn't work

[LuComic]

Body

Hi! I added a transition for my opiq section in the sidepanel, but it doesn't seem work. I don't know much about javascript but I'm guessing there's the problem. Let me know if html code is needed.

.other-stuff-container {
  margin-left: 20px;
  margin-right: auto;
}

.opiq-container {
  display: none;
  width: 50%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.side-panel-expanded .opiq-container {
  display: block;
  opacity: 1;
}

@media (min-width: 768px) {
  .other-stuff-container {
    display: flex;
    justify-content: space-between;
  }

  .opiq-container {
    width: 50%;
  }
}

document.querySelector(".side-panel-toggle").addEventListener("click", () => {
  const sidePanel = document.querySelector(".side-panel");
  const iconOpen = document.querySelector(".sp-icon-open");
  const iconClose = document.querySelector(".sp-icon-close");
  const isOpen = sidePanel.classList.toggle("side-panel-expanded");
  
  if (sidePanel.classList.contains("side-panel-expanded")) {
    sidePanel.style.width = "45%";
    iconOpen.style.display = "none";
    iconClose.style.display = "initial";
    document.querySelector('.opiq-container').classList.add('showtime');
  } else {
    sidePanel.style.width = "450px";
    iconOpen.style.display = "initial";
    iconClose.style.display = "none";
  }
  if (isOpen) {
    openIcon.style.display = "none";
    closeIcon.style.display = "initial";
    document.querySelector('.opiq-container').classList.add('showtime');
  } else {
    openIcon.style.display = "initial";
    closeIcon.style.display = "none";
    setTimeout(() => {
      document.querySelector('.opiq-container').classList.remove('showtime');
    }, 500);
  }

});

Guidelines

• I have read and understood this category's guidelines before making this post.

[GurbanmyradowSerdar]

Hi can you provide your code? in best case provide repo or peace of codes

[LuComic]

sorry for the late reply, heres the html part for this. The pages is lucomic.github.io/calendar-feature if this also helps

      <div class="other-stuff-container">
          <div class="fwork-container">
            <h2 class="calendar-headings" id="fwork">Tulevased tööd:</h2>
            <select id="referrer" name="referrer">
              <option value="">Kõik</option>
              <option value="1">Matemaatika</option>
              <option value="2">Kirjandus</option>
              <option value="3">Ajalugu</option>
              <option value="4">Keemia</option>
              <option value="5">Füüsika</option>
              <option value="6">Muusika</option>
              <option value="7">Bioloogia</option>
              <option value="8">Inglise keel</option>
              <option value="9">Eesti keel</option>
            </select>
            <h3 class="topic">Matemaatika</h3>
            <p class="description">Kontrolltöö: Joonte võrrandid</p>
            <h3 class="topic">Ajalugu</h3>
            <p class="description">Kontrolltöö: Prantsuse rev.</p>
            <h3 class="topic">Inglise keel</h3>
            <p class="description">Tunnikontroll: word formation</p>
          </div>
          <div class="opiq-container">
            <h2 class="calendar-headings">Opiq</h2>
            <a href="opiq.ee" class="to-opiq"><h3 class="topic">Kahe sirge vastastikused asendid</h3>
            <p class="description">Tähtaeg 02.06.24 - 3 ül — Matemaatika PALLAS 5.kursus — Kodutöö</p></a>
            <a href="opiq.ee" class="to-opiq"><h3 class="topic">Muusikatööstuse uued väljakutsed</h3>
            <p class="description">Tähtaeg 03.05.24 - 2 ül — Muusikaajalugu I (ajajoon), Pallas — Arvestuslik</p></a>
          </div>
        </div>

[GurbanmyradowSerdar]

Are you sure that you provided full code? because i tried it in myself it has some not found errors, looks like some html elements missed

[LuComic]

This is just a part of the html, i don’t know if you can see the full code with pages or not?

[rktndnjseh]

I don't know the reason why exactly.
but in that case(transition),
adding relative attribute may work or not.
you can try for it.

[LuComic]

made the code clearer and simpler but the transition still isn't working, let me know if you need the full html and js.

[LuComic]

heres the html:

<div class="wrapper">
    <div class="main">
    </div>
    <button class="side-panel-toggle" type="button">
      <span class="material-icons sp-icon-open">keyboard_double_arrow_left</span>
      <span class="material-icons sp-icon-close" style="display: none;">keyboard_double_arrow_right</span>
    </button>    
    <div class="side-panel">
      <div class="container">
        <div class="calendar-container">
          <div class="calendar">
            <div class="calendar-header">
              <span class="month-picker" id="month-picker"> May </span>
              <div class="year-picker" id="year-picker">
                <span class="year-change" id="pre-year">
                  <pre><</pre>
                </span>
                <span id="year">2020 </span>
                <span class="year-change" id="next-year">
                  <pre>></pre>
                </span>
              </div>
            </div>
            <div class="calendar-body">
              <div class="calendar-week-days">
                <div>E</div>
                <div>T</div>
                <div>K</div>
                <div>N</div>
                <div>R</div>
                <div>L</div>
                <div>P</div>
              </div>            
              <div class="calendar-days">
              </div>
            </div>
            <div class="calendar-footer">
            </div>
            <a href="youtube.com" id="to-bigger-calendar">Vaata täpsemalt</a>
            <div class="month-list"></div>
          </div>
        </div>
        <div class="other-stuff-container">
          <div class="fwork-container">
            <h2 class="calendar-headings" id="fwork">Tulevased tööd:</h2>
            <select id="referrer" name="referrer">
              <option value="">Kõik</option>
              <option value="1">Matemaatika</option>
              <option value="2">Kirjandus</option>
              <option value="3">Ajalugu</option>
              <option value="4">Keemia</option>
              <option value="5">Füüsika</option>
              <option value="6">Muusika</option>
              <option value="7">Bioloogia</option>
              <option value="8">Inglise keel</option>
              <option value="9">Eesti keel</option>
            </select>
            <h3 class="topic">Matemaatika</h3>
            <p class="description">Kontrolltöö: Joonte võrrandid</p>
            <h3 class="topic">Ajalugu</h3>
            <p class="description">Kontrolltöö: Prantsuse rev.</p>
            <h3 class="topic">Inglise keel</h3>
            <p class="description">Tunnikontroll: word formation</p>
          </div>
          <div class="opiq-container">
            <h2 class="calendar-headings">Opiq</h2>
            <a href="opiq.ee" class="to-opiq"><h3 class="topic">Kahe sirge vastastikused asendid</h3>
            <p class="description">Tähtaeg 02.06.24 - 3 ül — Matemaatika PALLAS 5.kursus — Kodutöö</p></a>
            <a href="opiq.ee" class="to-opiq"><h3 class="topic">Muusikatööstuse uued väljakutsed</h3>
            <p class="description">Tähtaeg 03.05.24 - 2 ül — Muusikaajalugu I (ajajoon), Pallas — Arvestuslik</p></a>
          </div>
        </div>
      </div>
    </div>
  </div>

[LuComic]

OMG THANKS! This fixed it, tough for a moment there was a problem that the "close" side-panel toggle icon didn't show, but the display "block" and "none" fixed it, so keeping your and my previous code together fixed it.