css页面切换效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Page Transition</title>
    <style>
        .fade-in {
            animation: fadeIn 2s;
        }
        .fade-out {
            animation: fadeOut 2s;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
    </style>
</head>
<body>
    <div id="content">
        <p>This is the initial content.</p>
    </div>
    <button onclick="toggleContent()">Toggle Content</button>

    <script>
        let content = document.getElementById('content');
        let isVisible = true;

        function toggleContent() {
            if (isVisible) {
                content.classList.remove('fade-in');
                content.classList.add('fade-out');
            } else {
                content.classList.remove('fade-out');
                content.classList.add('fade-in');
            }
            isVisible = !isVisible;
        }
    </script>
</body>
</html>