Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

69
Views
Add animation on remove child element

I'm using animation property CSS to animate the window when the user clicks maximize button. The window is created ONLY when the maximize button was clicked and the animation is working, but the problem is when I click the close button the window is doesn't animate. How can I animate when the close button is click?

JavaScript:

Show project image.

_showProjectImage(e) {
  const btn = e.target.closest('.projects__maximize-btn');
  if (!btn) return;
  const { id } = btn.dataset;
  const { image } = this._data.find(image => image.id === +id);

  this._projectBox = e.target.closest('.projects__box');
  const markup = this._generateProjectImage(image);
  this._projectBox.insertAdjacentHTML('afterbegin', markup);
}

Hide project image.

_hideProjectImage(e) {
  const btnClose = e.target.closest('.btn__close-window');
  if (!btnClose) return;
  this._projectBox.removeChild(this._projectBox.firstElementChild);
}

HTML Element:

_generateProjectImage(image) {
  return `
    <div class="projects__window">
      <div class="projects__window-content">
        <button class="projects__window-close btn__close-window">
          <svg class="projects__window-icon">
            <use
              xlink:href="${icon}#icon-close"
            ></use>
          </svg>
        </button>
        <div class="projects__window-box">
          <img src="${image}" alt="" class="projects__window-image">
        </div>
      </div>
    </div>
  `;
}

CSS:

.projects {
  &__window {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    animation: window-animate 300ms linear;
  }
}


@keyframes window-animate {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
7 months ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.