让模态框动起来！css动画实现流畅弹出与收起

利用 CSS 动画巧妙制作小程序模态框的动感效果

在小程序开发中，模态框是一种常见的组件，它可以用来显示重要信息、收集用户输入，或执行其他操作。为了让模态框更具视觉吸引力，我们可以在小程序中使用 CSS 动画来实现酷炫的动感效果。

揭秘模态框动画的原理

模态框动画效果的实现离不开 CSS 动画中的“animation”属性。它可以控制动画的持续时间、延迟时间、动画类型和迭代次数。通过精心调整这些参数，我们可以打造出形形色色的动画效果。

用 CSS 代码实现模态框动画

首先，我们在模态框的样式表中添加以下 CSS 代码：

.modal-container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fade-in 0.3s ease-in forwards;
}

.modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  background-color: white;
  animation: slide-up 0.3s ease-in forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    transform: translate(-50%, -100%);
  }

  to {
    transform: translate(-50%, -50%);
  }
}

这段代码实现了模态框的淡入和向上滑动动画效果。

监听滚动事件，实现动态隐藏和显示

为了让模态框在页面滚动时能够自动隐藏或显示，我们在页面的滚动事件监听器中加入以下代码：

window.addEventListener("scroll", function() {
  if (window.scrollY > 100) {
    document.querySelector(".modal-container").classList.add("hidden");
  } else {
    document.querySelector(".modal-container").classList.remove("hidden");
  }
});

这样，当滚动距离超过100px时，模态框会自动隐藏，当滚动距离小于100px时，模态框会自动显示。

优化动画效果，锦上添花

为了让动画效果更流畅和美观，我们可以对动画参数进行微调。比如，缩短动画持续时间，加快动画速度；或延长动画延迟时间，打造更平滑的动画效果。

常见问题解答

1. 如何在模态框中添加关闭按钮？

在.modal-container中添加以下代码：

<button class="close-button" onClick="close()">关闭</button>

在小程序页面中添加以下代码：

close() {
  this.setData({
    modalVisible: false
  })
}

2. 如何让模态框在点击外部区域时关闭？

在.modal-container中添加以下代码：

onClick="close()"

在小程序页面中添加以下代码：

close() {
  this.setData({
    modalVisible: false
  })
}

3. 如何让模态框在特定时间后自动关闭？

在小程序页面中添加以下代码：

setTimeout(() => {
  this.setData({
    modalVisible: false
  })
}, 3000)

4. 如何让模态框支持手势拖动？

在小程序页面中添加以下代码：

wx.createSelectorQuery().select('.modal-content').fields({ size: true }, res => {
  const modalHeight = res.height
  const modalTop = res.top
  let startY = 0
  let modalY = modalTop

  this.data.modalContentRef.addEventListener('touchstart', e => {
    startY = e.touches[0].pageY
    modalY = modalTop
  })

  this.data.modalContentRef.addEventListener('touchmove', e => {
    const moveY = e.touches[0].pageY
    const offsetY = moveY - startY

    if (offsetY > 0 && offsetY < modalHeight) {
      this.setData({
        modalTop: modalY + offsetY
      })
    }
  })

  this.data.modalContentRef.addEventListener('touchend', e => {
    if (modalY + modalHeight / 2 < modalTop) {
      this.setData({
        modalVisible: false
      })
    } else {
      this.setData({
        modalTop: modalTop
      })
    }
  })
})

5. 如何让模态框支持键盘操作？

在小程序页面中添加以下代码：

wx.onKeyboardComplete(res => {
  if (res.errMsg === 'onKeyboardComplete:ok') {
    this.setData({
      modalVisible: false
    })
  }
})

结语

通过使用 CSS 动画和巧妙的代码编写，我们可以在小程序中轻松制作出各种动感十足的模态框动画效果。这些效果不仅可以提升小程序的用户体验，还能让你的小程序脱颖而出。