I want to add a curtain that goes up over the player

[asasass]

Fading in blog-pager from display none: https://jsfiddle.net/Ld32soqr/1/

I don’t think you can do that though.

AI

Sure, you can add a fade-in effect to the .blog-pager element after it is unhidden by using CSS transitions. Here’s how you can do it:

First, add an initial opacity and a transition to the .blog-pager class:

CSS

.blog-pager {
  /* existing styles */
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

Then, define a new class for the visible state:

CSS

.blog-pager.visible {
  opacity: 1;
}

Finally, modify your JavaScript code to add the visible class after the hide class is removed:

JavaScript

panel.addEventListener('transitionend', function() {
  panel.style.display = 'none';
  const blogPager = document.querySelector('.blog-pager');
  blogPager.classList.remove('hide');
  blogPager.classList.add('visible');  // add this line
});

Now, when the hide class is removed, the visible class is added, and the .blog-pager element will fade in. Remember, for this effect to work, the element should be initially hidden using CSS. If JavaScript is disabled, then the element will be always visible instead of always invisible.

Fixed: removed display: none; https://jsfiddle.net/Ld32soqr/2/

  panel.addEventListener('transitionend', function() {
    panel.style.display = 'none';
    const blogPager = document.querySelector('.blog-pager');
    //blogPager.classList.remove('hide');
      blogPager.classList.add('visible'); 
  });
}