UniApp 弹窗动画效果实现：点击按钮弹出擦除动画弹窗

<template>
  <view>
    <!-- 按钮 -->
    <button class='btn' @click='showPopup'>点击弹窗</button>
<pre><code>&lt;!-- 弹窗 --&gt;
&lt;view class='popup' :class=&quot;{'show': isPopupVisible}&quot;&gt;
  &lt;view class='content'&gt;
    &lt;!-- 弹窗内容 --&gt;
    &lt;text&gt;弹窗内容&lt;/text&gt;
    &lt;button class='close-btn' @click='hidePopup'&gt;关闭&lt;/button&gt;
  &lt;/view&gt;
&lt;/view&gt;
</code></pre>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isPopupVisible: false
    }
  },
  methods: {
    // 显示弹窗
    showPopup() {
      this.isPopupVisible = true;
    },
    // 隐藏弹窗
    hidePopup() {
      this.isPopupVisible = false;
    }
  }
}
</script>
<style>
.btn {
  width: 200px;
  height: 50px;
  background-color: #ff0000;
  color: #ffffff;
  border-radius: 10px;
  margin: 20px auto;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.popup.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  width: 200px;
  height: 200px;
  background-color: #ffffff;
  border-radius: 10px;
  animation: popup-enter 0.3s;
}

@keyframes popup-enter {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.close-btn {
  margin-top: 20px;
}
</style>
<h2>UniApp 弹窗动画效果实现：点击按钮弹出擦除动画弹窗</h2>
<p>本教程将详细介绍如何在 UniApp 中实现点击页面上的按钮弹出一个带有擦除动画效果的弹窗，并提供完整的代码示例。</p>
<p><strong>步骤：</strong></p>
<ol>
<li>
<p><strong>创建一个新的 UniApp 项目。</strong></p>
</li>
<li>
<p><strong>在页面的<code>template</code>中添加一个按钮和一个弹窗组件，并设置相应的样式和事件绑定。</strong></p>
<pre><code class="language-html">&lt;template&gt;
  &lt;view&gt;
    &lt;!-- 按钮 --&gt;
    &lt;button class='btn' @click='showPopup'&gt;点击弹窗&lt;/button&gt;

    &lt;!-- 弹窗 --&gt;
    &lt;view class='popup' :class=&quot;{'show': isPopupVisible}&quot;&gt;
      &lt;view class='content'&gt;
        &lt;!-- 弹窗内容 --&gt;
        &lt;text&gt;弹窗内容&lt;/text&gt;
        &lt;button class='close-btn' @click='hidePopup'&gt;关闭&lt;/button&gt;
      &lt;/view&gt;
    &lt;/view&gt;
  &lt;/view&gt;
&lt;/template&gt;
</code></pre>
</li>
<li>
<p><strong>在<code>data</code>中添加一个<code>isPopupVisible</code>变量来控制弹窗的显示与隐藏。</strong></p>
<pre><code class="language-javascript">&lt;script&gt;
export default {
  data() {
    return {
      isPopupVisible: false
    }
  },
  methods: {
    // 显示弹窗
    showPopup() {
      this.isPopupVisible = true;
    },
    // 隐藏弹窗
    hidePopup() {
      this.isPopupVisible = false;
    }
  }
}
&lt;/script&gt;
</code></pre>
</li>
<li>
<p><strong>在<code>style</code>中设置按钮和弹窗的样式，并定义弹窗的进入动画效果。</strong></p>
<pre><code class="language-css">&lt;style&gt;
.btn {
  width: 200px;
  height: 50px;
  background-color: #ff0000;
  color: #ffffff;
  border-radius: 10px;
  margin: 20px auto;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.popup.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  width: 200px;
  height: 200px;
  background-color: #ffffff;
  border-radius: 10px;
  animation: popup-enter 0.3s;
}

@keyframes popup-enter {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.close-btn {
  margin-top: 20px;
}
&lt;/style&gt;
</code></pre>
</li>
<li>
<p><strong>运行 UniApp 项目，点击按钮时，弹出的弹窗将会有一个擦除进入的动画效果。</strong></p>
</li>
</ol>
<p>通过以上步骤，你就可以在 UniApp 中实现点击浮在页面上的按钮，弹出一个带有擦除进入动画的弹窗了。</p>
<p><strong>注意：</strong></p>
<ul>
<li>以上代码示例仅供参考，您可以根据自己的需求进行修改。</li>
<li>UniApp 支持多种动画效果，您可以根据需要选择其他动画效果。</li>
<li>为了更好的用户体验，建议您根据实际情况设置合适的动画时间和动画效果。</li>
</ul>
<p>希望本教程能够帮助您在 UniApp 中实现弹窗动画效果。如果您有任何问题，请随时留言。</p>