uniapp 动画弹出效果

Uniapp 中可以使用 CSS3 动画和 JavaScript 实现弹出效果。

一种简单的实现方式是使用 CSS3 动画。例如：

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: popup 0.3s ease forwards;
}

@keyframes popup {
  from {
    transform: translate(-50%, -70%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

上述代码定义了一个名为 `popup` 的弹出框样式，使用 `animation` 属性指定了一个名为 `popup` 的动画效果。这个动画从弹出框的初始状态（位置在屏幕中央上方，透明度为 0）到最终状态（位置在屏幕中央，透明度为 1）的变化过程，持续时间为 0.3 秒，缓动函数为 ease。

另一种实现方式是使用 JavaScript，通过改变元素的样式属性来实现弹出效果。例如：

export default {
  data() {
    return {
      showPopup: false
    };
  },
  methods: {
    openPopup() {
      this.showPopup = true;
      setTimeout(() => {
        this.$refs.popup.style.transform = 'translate(-50%, -50%)';
        this.$refs.popup.style.opacity = 1;
      }, 0);
    },
    closePopup() {
      this.$refs.popup.style.transform = 'translate(-50%, -70%)';
      this.$refs.popup.style.opacity = 0;
      setTimeout(() => {
        this.showPopup = false;
      }, 300);
    }
  }
};

上述代码定义了一个名为 `showPopup` 的响应式数据，用于控制弹出框的显示和隐藏。`openPopup` 方法在显示弹出框时，先将 `showPopup` 设为 `true`，然后通过 `setTimeout` 延迟执行弹出动画，将 `transform` 和 `opacity` 样式属性从初始值变为最终值。`closePopup` 方法在隐藏弹出框时，直接将 `transform` 和 `opacity` 样式属性从最终值变为初始值，然后再将 `showPopup` 设为 `false`。