Schaltflächenanimation beim Ein-/Ausblenden ⇐ CSS

[Anonymous]

Ich verwende Code, der Inhalte verbirgt und eine Schaltfläche anzeigt, wenn die Seite um 250 Pixel nach unten gescrollt wird. Wenn Sie auf die Schaltfläche klicken, wird derselbe Inhalt angezeigt, und wenn Sie erneut darauf klicken, wird er ausgeblendet.
Alles scheint wie erwartet zu funktionieren, aber es gibt ein Problem. Die Schaltfläche erscheint am unteren Rand des Blocks und darüber ist viel leerer Raum, wo der Inhalt sein sollte.
Wie kann ich die Schaltfläche animieren, sodass sie sich beim Erscheinen wie ein Vorhang nach oben bewegt? Und wenn Sie auf die Schaltfläche klicken, wird sie unter den Inhalt verschoben.

Code: Select all

document.addEventListener("DOMContentLoaded", function() {
const contentBlock = document.querySelector('.content');
const toggleButton = document.querySelector('.toggle-button');

// Manually switching the visibility of a block (by clicking a button)
function toggleVisibility() {
if (contentBlock.classList.contains('hidden-content')) {
contentBlock.classList.remove('hidden-content');
contentBlock.classList.add('show-content');
} else {
contentBlock.classList.remove('show-content');
contentBlock.classList.add('hidden-content');
}
}

// Button click event handler
toggleButton.addEventListener('click', () => {
toggleVisibility();
});

// Handling browser window scrolling
window.addEventListener('scroll', () => {
if (window.scrollY > 250) { // If you scrolled down the page by 250px
toggleButton.style.display = 'block'; // The appearance of the button
contentBlock.classList.remove('show-content'); // The content block is hidden
contentBlock.classList.add('hidden-content');
} else { // If you scrolled back up
toggleButton.style.display = 'none'; // The button is hidden
contentBlock.classList.remove('hidden-content'); // The content block appears again
contentBlock.classList.add('show-content');
}
});
});

Code: Select all

.sticky-block {
position: sticky;
top: 90px;
z-index: 999;
transition: all .2s ease-in-out;
height:2000px;
}

.content {
transition: opacity 0.5s ease-in-out;
}

.toggle-button {
display: none;
max-width: 200px;
margin: 0 auto;
background-color: rgb(191, 79, 203);
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
}

.toggle-button:hover {
background-color: rgb(143, 62, 184);
}

.hidden-content {
opacity: 0;
visibility: hidden;
}

.show-content {
opacity: 1;
visibility: visible;
}

Code: Select all

Content Here
Scrolling content
Show/Hide