|
|
@@ -3,45 +3,113 @@
|
|
|
|
|
|
<head>
|
|
|
<style>
|
|
|
- .my-div {
|
|
|
- width: 200px;
|
|
|
- height: 100px;
|
|
|
- background-color: lightblue;
|
|
|
- position: absolute;
|
|
|
- top: 50px;
|
|
|
- left: 50px;
|
|
|
- transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
|
|
|
- /* 添加过渡效果 */
|
|
|
- }
|
|
|
+ /* 父容器基础样式 */
|
|
|
+ .bottom-panel {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 30vh;
|
|
|
+ background: rgba(255, 255, 255, 0.95);
|
|
|
+ box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
- .hidden {
|
|
|
- transform: translateX(-100%);
|
|
|
- /* 移出屏幕左侧 */
|
|
|
+ /* 隐藏状态 */
|
|
|
opacity: 0;
|
|
|
- /* 完全透明 */
|
|
|
+ visibility: hidden;
|
|
|
+
|
|
|
+ /* 过渡动画 */
|
|
|
+ transition: all 0.3s ease-in-out;
|
|
|
+
|
|
|
+ /* Flex布局设置 */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 激活状态 */
|
|
|
+ .bottom-panel.active {
|
|
|
+ opacity: 1;
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 子元素样式 */
|
|
|
+ .panel-item {
|
|
|
+ width: 80%;
|
|
|
+ height: 20%;
|
|
|
+ min-height: 50px;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 12px;
|
|
|
+ transition: transform 0.2s;
|
|
|
+
|
|
|
+ /* 内容居中 */
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-family: Arial;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 交互效果 */
|
|
|
+ .panel-item:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 触发按钮样式 */
|
|
|
+ .trigger-btn {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 20px;
|
|
|
+ right: 20px;
|
|
|
+ padding: 12px 24px;
|
|
|
+ background: #007bff;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 25px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .trigger-btn:hover {
|
|
|
+ background: #0056b3;
|
|
|
+ transform: scale(1.05);
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
+ <!-- 触发按钮 -->
|
|
|
+ <button class="trigger-btn">显示面板</button>
|
|
|
|
|
|
- <div class="my-div" id="myDiv">
|
|
|
- 这是一个需要移出屏幕的 div。
|
|
|
+ <!-- 底部面板 -->
|
|
|
+ <div class="bottom-panel">
|
|
|
+ <div class="panel-item">内容区块 1</div>
|
|
|
+ <div class="panel-item">内容区块 2</div>
|
|
|
+ <div class="panel-item">内容区块 3</div>
|
|
|
</div>
|
|
|
|
|
|
- <button onclick="moveDiv()">移出 div</button>
|
|
|
-
|
|
|
<script>
|
|
|
- function moveDiv() {
|
|
|
- const div = document.getElementById('myDiv');
|
|
|
- div.classList.add('hidden'); // 添加 hidden 类，触发动画
|
|
|
- // 动画结束后隐藏元素
|
|
|
- setTimeout(() => {
|
|
|
- div.style.display = 'none';
|
|
|
- }, 500); // 过渡动画持续 0.5 秒
|
|
|
- }
|
|
|
- </script>
|
|
|
+ // 获取DOM元素
|
|
|
+ const panel = document.querySelector('.bottom-panel');
|
|
|
+ const triggerBtn = document.querySelector('.trigger-btn');
|
|
|
+
|
|
|
+ // 点击触发按钮
|
|
|
+ triggerBtn.addEventListener('click', () => {
|
|
|
+ panel.classList.toggle('active');
|
|
|
|
|
|
+ // 更新按钮文字
|
|
|
+ const isActive = panel.classList.contains('active');
|
|
|
+ triggerBtn.textContent = isActive ? '隐藏面板' : '显示面板';
|
|
|
+ });
|
|
|
+
|
|
|
+ // 点击面板外部关闭（可选）
|
|
|
+ document.addEventListener('click', (e) => {
|
|
|
+ if (!panel.contains(e.target) && e.target !== triggerBtn) {
|
|
|
+ panel.classList.remove('active');
|
|
|
+ triggerBtn.textContent = '显示面板';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ </script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
