【css动画】从小程序底部弹出模态框，上滑隐藏，下滑显示

要实现这样的动画效果，你可以使用CSS的@keyframes规则来定义弹出和隐藏的动画，并使用JavaScript来控制模态框的显示和隐藏。以下是一个简单的实现示例：

HTML:

<div id="modal" class="modal">
  <!-- 模态框内容 -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>模态框内容</p>
  </div>
</div>

CSS:

.modal {
  display: none; /* 默认隐藏模态框 */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  transition: transform 0.3s ease-out; /* 平滑过渡动画 */
}
 
.modal-content {
  /* 模态框内容样式 */
}
 
.show {
  display: flex; /* 显示模态框 */
}
 
.slide-up {
  animation: slideUp 0.3s forwards; /* 执行上滑隐藏的动画 */
}
 
.slide-down {
  animation: slideDown 0.3s forwards; /* 执行下滑显示的动画 */
}
 
/* 定义上滑隐藏的关键帧动画 */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
 
/* 定义下滑显示的关键帧动画 */
@keyframes slideDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

JavaScript:

// 获取模态框元素
var modal = document.getElementById('modal');
 
// 显示模态框
function showModal() {
  modal.classList.add('show');
  modal.classList.remove('slide-up');
}
 
// 隐藏模态框
function hideModal() {
  modal.classList.add('slide-up');
  setTimeout(function() {
    modal.classList.remove('show');
    modal.classList.remove('slide-up');
  }, 300); // 等待动画完成后移除显示类
}
 
// 用户操作，比如点击按钮触发显示或隐藏
document.getElementById('your-trigger-button').addEventListener('click', function() {
  if (modal.classList.contains('show')) {
    hideModal();
  } else {
    showModal();
  }
});

在这个示例中，我们定义了.modal类来设置模态框的基本样式，并在显示时添加.show类。.slide-up和.slide-down类用于触发上滑隐藏和下滑显示的动画。JavaScript函数showModal()和hideModal()用来控制模态框的显示和隐藏。