uni-app 插件需求 弹出框从顶部弹出带一点抖动效果

在 uni-app 中实现一个从顶部弹出并带有抖动效果的弹出框，你可以使用 CSS 动画结合 Vue 的条件渲染来实现。以下是一个简化的代码示例，展示了如何实现这一功能。

1. 创建弹出框组件

首先，创建一个新的组件文件 Popup.vue，用于显示弹出框。

<template>
  <view v-if="visible" class="popup-container" :class="{ shaking: isShaking }">
    <view class="popup-content">
      <!-- 弹出框内容 -->
      <text>这是一个弹出框</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      isShaking: false
    };
  },
  methods: {
    showPopup() {
      this.visible = true;
      this.shakePopup();
    },
    shakePopup() {
      this.isShaking = true;
      setTimeout(() => {
        this.isShaking = false;
      }, 500); // 抖动持续时间为500ms
    },
    hidePopup() {
      this.visible = false;
    }
  }
};
</script>

<style scoped>
.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px; /* 根据需要调整高度 */
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  animation: slideInDown 0.3s ease-out;
}

.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.shaking {
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}
</style>

2. 在页面中使用弹出框组件

在你的页面文件中（例如 index.vue），引入并使用这个弹出框组件。

<template>
  <view>
    <button @click="showPopup">显示弹出框</button>
    <Popup ref="popup" />
  </view>
</template>

<script>
import Popup from '@/components/Popup.vue';

export default {
  components: {
    Popup
  },
  methods: {
    showPopup() {
      this.$refs.popup.showPopup();
    }
  }
};
</script>

这样，当你点击按钮时，弹出框会从顶部滑入并带有短暂的抖动效果。你可以根据需要调整动画时间和样式。